HTML-кнопка, чтобы перейти к разделу на веб-странице

Question

Мне было поручено редактировать сайт Wordpress, который я не создавал. Я не знаком с wordpress или php, но у меня есть , но я теперь застрял.

На веб-странице есть набор ссылок в пределах <ul>, что при нажатии на ссылки страница автоматически прокручивает страницу (гладко) к разделу на веб-сайте.

<ul> выглядит следующим образом.

  <ul class="main-menu" id="main-menu"> 
      <li id="menu-about_page"><a href="#">About</a></li> 
      <li id="menu-energy_page"><a href="#">Energy</a></li> 
      </ul> 

О связи переводится в раздел about, который выглядит следующим образом.

<div id="about_page" class="page-row"> 
    <div class="page-wrap" id="about_page-wrap" alt="home_page"> 
    <div class="clear"></div> 

    <div class="clear"></div> 
    <div class="container"> 
     <div class="container-inner"> 
      <?= get_page_slider('About Slider'); ?> 
     </div> 
    </div> 
    <div class="page-overlay"></div> 
    </div> 
</div> 

Я хочу заменить меню рядом кнопок (запрос клиента), которые выполняют ту же функцию. Код, который я до сих пор показывал ниже.

<div> 
     <a href="#"><button type="button" class="transparent_btn">About</button></a> 
    </div> 

Это не работает, что мне не хватает. Я подумал, что, возможно, какой-то причудливый javascript, контролирующий свиток, но насколько я могу видеть в коде, нет никакого.

Answer 1

Почему бы не сохранить текущее меню и функциональность WP? Похоже, все, что вам нужно сделать, - это стиль меню, напоминающего кнопки. Поскольку разметка не изменена, вам не нужно будет замарать руки в шаблонах WP, и существующий скрипт-javascript будет работать.

#main-menu { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: arial; 
 
} 
 
#main-menu li { 
 
    display: inline-block; 
 
} 
 
#main-menu li a { 
 
    display: inline-block; 
 
    padding: 0 1em; 
 
    line-height: 2em; 
 
    background: #2a96c3; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    border-radius: 4px; 
 
    border: 1px solid rgba(0, 0, 0, 0.5); 
 
    box-shadow: inset 0px -1px 1px rgba(0, 0, 0, 0.5), inset 0px 1px 1px rgba(255, 255, 255, 0.5); 
 
} 
 
#main-menu li a:hover { 
 
    background: #ccc; 
 
    color: #000; 
 
}

<ul class="main-menu" id="main-menu"> 
 
    <li id="menu-about_page"><a href="#">About</a></li> 
 
    <li id="menu-energy_page"><a href="#">Energy</a></li> 
 
</ul>

Answer 2

Вы должны добавить идентификатор раздела, который вы хотите, чтобы перейти к:

<div> 
 
    <a href="#about_page"> 
 
    <button type="button" class="transparent_btn">About</button> 
 
    </a> 
 
</div>

P.D. Я бы потерял разметку кнопки и нарисую ссылку, чтобы она выглядела как кнопка.

Answer 3

Вы должны добавить идентификатор раздела, который вы хотите, чтобы перейти к:

<div> 
    <a href="#about_page"> 
    <button type="button" class="transparent_btn">About</button> 
    </a> 
</div> 

И использовать этот JavaScript внутри JQuery кода

$("a[href^='#']").on('click', function(e) { 
    // prevent default anchor click behavior 
    e.preventDefault(); 

    // store hash 
    var hash = this.hash; 
    if (hash == "#top") 
    { 
     $('html, body').animate({ 
      scrollTop: 0 
     }, 1000, function(){}); 
    }else 
    { 
     $('html, body').animate({ 
      scrollTop: $(hash).offset().top - 70 
     }, 1000, function(){}); 
    }  
});