jQuery 滚动到链接元素

Question

我正在尝试实现一些 jQuery 来滚动到一个链接，该链接在页面加载时有一个名为“selected-node”的类，但我没有运气让它工作。这是我的代码目前的样子：

$(document).ready(function () {
    $('a.selected-node').scrollTo();
});

我不是 jQuery 专家，所以你知道我做错了什么吗？

Answer 1

假设您使用此插件 scrollTo 插件页面

鉴于此，您需要更改说明以说明滚动量：

 $.scrollTo($('a.selected-node') );//scroll to target

如果您需要在页面上使用插件的帮助，只需在页面上添加指向该插件（放置它的位置）的链接，位于您放置 jQuery 链接的位置下方图书馆。

Answer 2

我认为您正在使用用于插件的代码。您是否正确地将插件代码添加到页面中？

这是您找到代码的地方吗？
http://flesler.blogspot.com/2007/10/jqueryscrollto.html

Answer 3

/*
    Anchor Slider by Cedric Dugas   
    Http://www.position-absolute.com 
*/
var locationHref = window.location.href,
    elementClick = $(this).children('a').attr("href"),
    destination = $(elementClick).offset().top;

$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, 1100, function() {
    window.location.hash = elementClick
});

应该有效。我在我的页面上使用它 http://jasonrb.com

Answer 4

如果您使用 jQuery scrollTo 插件，请尝试：

$(body).scrollTo( $('a.selected-node'), 1000 )

Answer 5

有一个 jQuery 插件完全可以满足您的需求，

我写了一个 jQuery 插件，动画滚动到视图之外的元素。

您可以简单地使用它，就像您最初想要做的那样：

$(document).ready(function () {
    $('a.selected-node').scrollintoview();
});

这个插件与scrollTo插件有何不同？

我的插件和 scrollTo 插件之间的区别在于，对于我的插件，您不必提供可滚动元素（您必须使用 .scrollTo() 插件提供） ）。您只需提供您想要查看的元素，然后对其调用 scrollintoview() 。插件将自动找到最近的可滚动祖先，并滚动尚未在视图中的元素。它将通过动画来完成此操作（您可以控制其速度），最后它还可以调用您的 complete 函数。

如果您的元素位于视图下方，它将滚动到底部，如果元素位于视图上方，它将滚动到顶部。尽可能的最近的地方。通过随后突出显示它，可以轻松地在页面/元素滚动时为用户提供焦点。

检查我的博客文章，您可以在其中将找到最新版本的 .scrollintoview() 插件，其中包含您可能感兴趣的所有详细信息。

您应该使用动画滚动吗？

根据页面进程的不同，您可能根本无法使用动画滚动。也许您应该跳转到特定元素。在这种情况下，您的代码将大大简化，因为您可以使用内置功能：

$(document).ready(function () {
    $('a.selected-node').get(0).scrollIntoView();
});

这只会跳转到您的链接。所有浏览器都支持此 DOM 功能，并且已经支持很长时间了。