javascript - 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，点击链接仍会将他们带到正确的位置。

希望这对您有所帮助!