jquery scrollTop和href =“＃”

Question

我使用此功能滚动到所需的容器：

function scrolear(destino){
    var stop = $(destino).offset().top;
    var delay = 1000;
    $('body').animate({scrollTop: stop+'px'}, delay);
    return true;
}

当像这样使用时出现问题：

<a href="#" onclick="scrolear('#container');">go</a>

因为href="#"会使正文滚动到页面顶部。

有没有办法阻止这种情况？

Answer 1

更新

考虑使用javascript到progressively enhance您的网站，而不是依赖它来让网站正常运行。在您的示例中，这可以通过以下方式实现：

HTML：

<a href="#container">go</a>

Javascript：

$(function() {
  $('a[href^="#"]').click(function(e) {
    e.preventDefault();
    var target = $(this).attr('href');
    var stop = $(target).offset().top;
    var delay = 1000;
    $('body').animate({scrollTop: stop + 'px'}, delay);
  });
});

这将截取href以＃开头的所有链接上的点击，并为您添加动画。如果用户没有启用javascript，则点击该链接仍会将其带到正确的位置。

希望这有帮助！

Answer 2

因为你使用jquery我会做

<a href="#">go</a>

$("a").click(function() {
    e.preventDefault(); // cancel's the '#' click event
    scrolear('#container');
});

Answer 3

<a href="javascript:void(0);" onclick="scrolear('#container');">go</a>

这只会给href分配一个javascript函数，它什么都不做，所以不会像#那样发生页面滚动

Answer 4

来自@ rich.okelly的更正回答

function scrollTosec(){
     $('a[href^="#"]').click(function(e) {
            e.preventDefault();
            var target = $(this).attr('href');
            var stop = $(target).offset().top;
            var delay = 200;
            $('body').animate({scrollTop: stop + 'px'}, delay);
          });
}