Question

我在stackoverflow上尝试了其他用户的一堆解决方案，但我只是无法得到任何工作。任何人都可以告诉我如何动画滚动到this page上的锚点。任何帮助都将非常感谢！

（对不起，我是新手为网站编写代码，是的，我正在使用它，它可能很糟糕，但它必须这样做。我能够上传javascript文件并通过CSS和HTML链接到它们）

Answer 1

jsfiddle怎么样？

滚动到特定ID！

function scrollToAnchor(aid){
    var aTag = $("a[name='"+ aid +"']");
    $('html,body').animate({scrollTop: aTag.offset().top},'slow');
}

$("#link").click(function() {
   scrollToAnchor('id3');
});

Answer 2

试试这个：

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

并按如下方式格式化您的链接：

<a href="#aboutUs" onClick="ScrollTo()">About Us</a>

Answer 3

如果您想制作动画/平滑滚动，可以使用：

var anchor = $('a[name=Photoshop]').offset().top
$(document.body).animate({
         scrollTop: var
     }, 2000);

如果您只想快速滚动，可以使用var anchor = $('a[name=Photoshop]').offset().top 然后$(document.body).scrollTop(anchor)

Answer 4

我也遇到过这个问题，我用的最好的教程是 http://www.learningjquery.com/2007/10/improved-animated-scrolling-script-for-same-page-links 确保你的锚链接在标签内

<a id="work></a>

然后使用哈希标记链接到它们

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

Answer 5

我有一个适合我的功能，它会自动为滚动设置动画，点击锚标记;

$("a").click(function(event){
    if(event.target.href.indexOf("#")!=-1){
        var arrhash=event.target.href.split("#");
        $('html, body').animate(
            { scrollTop: $('a[name=' + arrhash[1] + ']').offset().top },
            500,    // this is the animation time
            function (){ return false; }    // what to do after the animation
        );
    }
});

任何时候你跳到某个地方 - 它都会被动画化。此外，如果javascript不起作用，它将优雅地回退到标准跳转。

我无法让Abhishek Umrao的代码在顶部工作，所以我根据他们的想法改变了这一点。

Answer 6

其他建议的答案允许在滚动上进行动画制作以获得精确的链接。 JJ Shaw的答案不起作用，而且它会触发所有链接的事件，即使那些链接指向锚点的链接也是如此。对于所有想要像我一样在滚动上为锚链接创建所有链接的动画，这里的解决方案可以正常工作。

$('a[href^="#"]').on('click', function(event) {
    var anchor= $(this.getAttribute('href'));
    if( anchor.length ) {
       event.preventDefault();
       $('html, body').stop().animate({
          scrollTop: anchor.offset().top
       }, 500);
    }
});

动画滚动到页面上的锚点

6 个答案: