相同功能的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);