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

jquery，onclick和onload事件用于相同的功能

1 个答案: