Question

我在我正在玩的网站上有一些锚点，我希望他们滚动到锚点，而不是突然跳到锚点。我已经在堆栈溢出处尝试了几个已发布的解决方案但是还没有能够让它们运行起来。我做错了吗？

我已经尝试过这个代码，有些人喜欢它，但是他们不会工作：

$('a').click(function(){
$('html, body').animate({
    scrollTop: $( $(this).attr('href') ).offset().top
}, 500);
return false;
});

该网站可以在这里找到，目前只有关于我们的网站＆＃39; item锚定： http://jsfiddle.net/pnKu2/

Answer 1

首先，您应该只选择导航IE：

，而不是选择所有锚点

$('.menu-hover-underline').click(function(){
    return false;
});

接下来扩展此功能以包含滚动

$('.menu-hover-underline').click(function(){
    var divId = $(this).text().toLowerCase();
    $('html, body').animate({
        scrollTop: $("#"+divId).offset().top
    }, 500);
    return false;
});

请参阅jsfiddle http://jsfiddle.net/pnKu2/2/

请注意我更新了你的div ID，因为除了div之外的所有内容都是id =＆＃34; title＆＃34;。

Answer 2

你可以这样试试：

$('a').click(function(e){
     var href = $(this).attr("href");
     var offsetTop = href === "#" ? 0 : $(href).offset().top;

     $('html, body').stop().animate(
     { 
       scrollTop: offsetTop
     }, 1000);

     e.preventDefault();
});

DEMO

Answer 3

试试这个

$(function() {
    $('a').click(function(e){
        var top = $( $(this).attr('href') ).offset().top;
        $('html, body').animate({
            scrollTop: top
        }, 500);
        return false;
    });
});

滚动页面到锚点

3 个答案: