ウェブページのセクションにスクロールするためのHTMLボタン

Question

作成していないワードプレスサイトを編集するタスクが与えられました。私はワードプレスや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リンクは、このように見える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テンプレートで手を汚す必要はなく、既存のスクロール・ツー・ジャバスクリプトは引き続き動作します。

あなたはにスクロールするセクションのIDを追加する必要が

#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

あなたはにスクロールするセクションのIDを追加する必要があります。

<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> 

と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(){}); 
    }  
}); 

をこのJavaScriptを使用