使用单页网站的 scrollTop 功能定位菜单链接的更简洁的方法？

Question

我在我的单页网站锚点菜单 links（通过 wordpress 管理员添加）上为每个菜单添加了 scrollTop 函数，并为滚动事件分配了一个特定的 class，但我不得不为每个 link 写 4 次 jQuery。有没有更简洁的方法 selecting 一个函数中的特定 classes，然后选择相关的“#”，每个部分都锚定为 #section_1、#section_2等...我如何 select 相关 link 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);
    });
});

已添加 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

Here's a working example

基本上，您将获得 link 的 href 值（必须与部分 ID 相同）和该元素的 link。不需要类。

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>

Answer 2

使用您当前的 Wordpress 菜单

更新 - 添加了去抖

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');

使用单页网站的 scrollTop 功能定位菜单链接的更简洁的方法？

More concise way of targeting menu links with scrollTop function for single page website?

jquery

scrolltop