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 来逐步增强您的网站，而不是依赖它来使网站正常运行。在您的示例中，这可以通过以下方式实现：

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