jquery顺利滚动到锚点？

Question

有没有办法使用jQuery向下滚动到锚链接？

喜欢:

$(document).ready(function(){
  $("#gotomyanchor").click(function(){
      $.scrollSmoothTo($("#myanchor"));
  });
});

？

Answer 1

我是这样做的:

    var hashTagActive = "";
    $(".scroll").on("click touchstart" , function (event) {
        if(hashTagActive != this.hash) { //this will prevent if the user click several times the same link to freeze the scroll.
            event.preventDefault();
            //calculate destination place
            var dest = 0;
            if ($(this.hash).offset().top > $(document).height() - $(window).height()) {
                dest = $(document).height() - $(window).height();
            } else {
                dest = $(this.hash).offset().top;
            }
            //go to destination
            $('html,body').animate({
                scrollTop: dest
            }, 2000, 'swing');
            hashTagActive = this.hash;
        }
    });

然后你只需要像这样创建你的锚:

<a class="scroll" href="#destination1">Destination 1</a>

你可以在我的网站上看到它.
这里也有一个演示:http://jsfiddle.net/YtJcL/

Answer 2

我会使用CSS-Tricks.com的简单代码片段:

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

资料来源:http://css-tricks.com/snippets/jquery/smooth-scrolling/

Answer 3

到目前为止我见过的最佳解决方案: jQuery:Smooth Scrolling Internal Anchor Links

HTML:

<a href="#comments" class="scroll">Scroll to comments</a>

脚本:

jQuery(document).ready(function($) {
    $(".scroll").click(function(event){     
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
    });
});

Answer 4

jQuery.scrollTo会做你想要的一切,甚至更多!

你可以传递各种不同的东西:

• 原始数字
• 字符串('44','100px','+ = 30px'等)
• DOM元素(逻辑上,可滚动元素的子元素)
• 一个选择器,它将相对于可滚动元素
• 字符串'max'滚动到结尾.
• 一个字符串,指定滚动到容器的该部分的百分比(fe:50%转到*到中间).
• 哈希{top:x,left:y},x和y可以是任何类型的数字/字符串,如上所述.