単一ページのWebサイトのscrollTop機能を使用してメニューリンクをより簡潔にターゲット設定する方法はありますか？

Question

私は単一ページのウェブサイトのアンカーメニューリンク（wordpress adminによって追加）にそれぞれscrollTop関数を追加し、スクロールイベントに対して特定のクラスを割り当てましたが、各リンクに対してjQueryを4回書く必要がありました。 1つの関数で特定のクラスを選択するより簡潔な方法がありますか？各セクションは＃section_1、＃section_2などとして固定されています。関連するリンクs1、s2、s3などはどうすれば選択できますか？ ..関連するセクションにスクロールすることを知っていますか？

おかげ

コード

 $(document).ready(function(){ 
    $(".s1").click(function(){ 
     $('html, body').animate({ 
      scrollTop: $("#section_1").offset().top 
     }, 1500); 
    }); 
}); 

    $(document).ready(function(){ 
    $(".s2").click(function(){ 
     $('html, body').animate({ 
      scrollTop: $("#section_2").offset().top 
     }, 1500); 
    }); 
}); 

    $(document).ready(function(){ 
    $(".s3").click(function(){ 
     $('html, body').animate({ 
      scrollTop: $("#section_3").offset().top 
     }, 1500); 
    }); 
}); 

$(document).ready(function(){ 
    $(".s4").click(function(){ 
     $('html, body').animate({ 
      scrollTop: $("#section_4").offset().top 
     }, 1500); 
    }); 
}); 

ADDED HTML

<header class="header-wrapper"> 
       <h1 class="logo-text">Sell Garrard 301</h1> 
       <div class="hamburger-helper"> 
       <div id="menu-toggle"> 
        <div id="hamburger"> 
         <span></span> 
         <span></span> 
         <span></span> 
        </div> 
        <div id="cross"> 
         <span></span> 
         <span></span> 
        </div> 
       </div> 
       </div> 
       <nav class="menu-hide"> 
         <ul id="header_menu" class="menu-hide"> 
<li id="menu-item-60" class="hide-list-item s1 menu-item menu-item-type- 
custom menu-item-object-custom menu-item-60"><a href="#section_1">Section 
One</a></li> 
<li id="menu-item-53" class="hide-list-item s2 menu-item menu-item-type- 
custom menu-item-object-custom menu-item-53"><a href="#section_2">Section 
Two</a></li> 
<li id="menu-item-61" class="hide-list-item s3 menu-item menu-item-type- 
custom menu-item-object-custom menu-item-61"><a href="#section_3">Section 
Three</a></li> 
<li id="menu-item-62" class="hide-list-item s4 menu-item menu-item-type- 
custom menu-item-object-custom menu-item-62"><a href="#section_4">Section 
Four</a></li> 
</ul> 
       </nav> 




      </header> 

Answer 1

あなたの現在のWordpressのメニューを使用して

UPDATED - デバウンス

を追加しました

jQueryの

jQuery(document).ready(function(e) { 

    //set variables 
    var debounce; 
    var menuitems = $('#header_menu .menu-item a'); 

    // for each .menu-item a 
    menuitems.each(function(){ 

     // on click of each a 
     $(this).on('click',function(e){ 

     // remove default click 
     e.preventDefault(); 

     // get the current href link and save a src variable 
     var src = $(this).attr('href'); 

     // if animation is running stop it 
     if (debounce) clearTimeout(debounce); 

      // create animation 
      debounce = setTimeout(function(){ 
       debounce = null; 
       $('html, body').animate({ 
        //add src varable from earlier 
        scrollTop: $(''+src+'').offset().top 
       }, 1500); 
      }); 
     }); 
}); 

}); 

作業例 - https://jsfiddle.net/Jim_Miraidev/vuyjgzyj/

HTML

<ul id="header_menu"> 
    <li class="menu-item s1"><a href="#section_1">menu item 1</a></li> 
    <li class="menu-item s2"><a href="#section_2">menu item 2</a></li> 
    <li class="menu-item s3"><a href="#section_3">menu item 3</a></li> 
</ul> 


<div id="section_2">content 1</div> 
<div id="section_2">content 2</div> 
<div id="section_3">content 3</div> 

別のオプションは、はい、最適な方法があります機能

var debounce; 

function myScrollTo($button,$div){ 
    $($button).on('click',function(e){ 
     e.preventDefault(); 
     if (debounce) clearTimeout(debounce); 
      debounce = setTimeout(function(){ 
       debounce = null; 
       $('html, body').animate({ 
         scrollTop: $($div).offset().top 
       }, 1500); 
      }); 
    }); 
} 
//fire function for each 
myScrollTo('.s1 a','#section_1'); 
myScrollTo('.s2 a','#section_2'); 
myScrollTo('.s3 a','#section_3'); 

Answer 2

Here's a working example

は基本的に、あなたはリンクのhrefの値を取得する（セクションと同じでなければなりませんid）とその要素へのリンク。クラスは必要ありません。

Javascriptを

$(document).ready(function() { 
    $('.menu a').on('click', function() { 
    var t = $(this); 

    $('html, body').animate({ 
     scrollTop: $(t.attr('href')).offset().top 
    }, 1500); 


    return false; 
    }); 
}); 

HTML

<ul class="menu"> 
    <li><a href="#section1">Section 1</a></li> 
    <li><a href="#section2">Section 2</a></li> 
    <li><a href="#section3">Section 3</a></li> 
</ul> 

<div class="sections"> 
    <div id="section1" class="section">Section 1</div> 
    <div id="section2" class="section">Section 2</div> 
    <div id="section3" class="section">Section 3</div> 
</div>