相同功能的jQuery，OnClick和Onload事件

Question

此代码最初用于平滑滚动到页面加载上的锚点。

尝试添加侦听器，以便它可以在同一页面上单击以滚动至锚点，但我卡住了。

// <!--smooth scroll to anchors-->
    (function(jQuery){
      var jump=function(e){
        if (e){
          e.preventDefault();                   //prevent the "normal" behavior which would be a "hard" jump
          var mytarget = jQuery(this).attr("href"); //get the target
        }else{
          var mytarget = location.hash;             //sets the target to the anchor part of a URL
        }
      jQuery('html,body').animate(                          //perform animated scrolling
      {
        scrollTop: jQuery(mytarget).offset().top - 100  //get top-position of target-element and set it as scroll target and move down 100px for fixed nav
        }, 1000,function(){                         //scrolldelay: 2 seconds
        location.hash = mytarget;                   //attach the hash (#jumptarget) to the pageurl
        });
      }
      jQuery('html, body').hide()
      // on load
      jQuery(document).ready(function(){
        jQuery('a[href^="#"]').bind("click", jump);
        if (location.hash){
          setTimeout(function(){
            jQuery('html, body').scrollTop(0).show()
            jump()
          }, 0);
        }else{
          jQuery('html, body').show()
        }
      });
      // on click
      var inpage-nav =document.querySelectorAll('.in-page-nav');
      for(var i=0;i<cell.length;i++){
        inpage-nav[i].addEventListener('click',jump);
      }
    })(jQuery)
// <!--End smooth scroll-->

html在页面导航中：

    <div class="just-a-nav">
      <ul>
        <li class="filter"><a class="in-page-nav" href="#item1">Item 1</a></li>
        <li class="filter"><a class="in-page-nav" href="#item2">Item 2</a></li>
        <li class="filter"><a class="in-page-nav" href="#item3">Item 3</a></li>
      </ul>
    </div>

Answer 1

示例html：希望这会有所帮助；这是我的小提琴：https：//jsfiddle.net/ledg92c7/

<a href="#goto-1" class="in-page-nav">Go-Target-1</a> | <a href="#goto-2" class="in-page-nav">Go-Target-2</a>
<div id="goto-0" style="height:1200px;background:green">
    .....Demo Content 0....
</div>
<div id="goto-1" style="height:300px;background:red">
    .....Demo Content 1....
</div>
<div id="goto-2" style="height:400px;background:blue">
    .....Demo Content 2....
</div>

jQuery：

(function($){
    var jump=function(e){
        if (e){
            e.preventDefault();  //prevent the "normal" behavior which would be a "hard" jump
            var mytarget = $(this).attr("href"); //get the target
        }else{
            var mytarget = location.hash;  //sets the target to the anchor part of a URL
        }
        $('html,body').animate({  //perform animated scrolling
            scrollTop: $(mytarget).offset().top - 100  //get top-position of target-element and set it as scroll target and move down 100px for fixed nav
        }, 1000,function(){   //scrolldelay: a few milliseconds
            location.hash = mytarget;   //attach the hash (#jumptarget) to the pageurl
        });
    }
    $('html, body').hide();
    // on load
    $(document).ready(function(){
        $('a[href^="#"]').bind("click", jump);
        if (location.hash){
            setTimeout(function(){
                $('html, body').scrollTop(0).show();
                jump();
            }, 0);
        }else{
           $('html, body').show();
        }
    });
    // on click
    /*var inpageNav =document.querySelectorAll('.in-page-nav');
    for(var i=0;i<inpageNav.length;i++){
        inpageNav[i].addEventListener('click',jump);
    }*/
    $('.in-page-nav').on('click',jump);
})(jQuery);