使用 jQuery-Smooth-Scroll 从一页到另一页？答案

【问题标题】：Using jQuery-Smooth-Scroll from one page to another?使用 jQuery-Smooth-Scroll 从一页到另一页？
【发布时间】：2011-01-21 09:04:27
【问题描述】：

我目前正在使用 jQuery-Smooth-Scroll 平滑地向上和向下滚动到我的一个页面上的各个锚点位置（第 1 页）。但是，我还希望能够从另一个页面（第 2 页）链接到 Page1（将 #bookmark 附加到 url）并让 jQuery-Smooth-Scroll 了解我正在调用该页面的事实使用#bookmark 并在页面完成加载后平滑向下滚动到相关位置。不知道有没有可能？

这是我正在使用的 Smooth-Scroll 版本：

https://github.com/kswedberg/jquery-smooth-scroll

我对 jQuery 还比较陌生，所以我可能会忽略一些明显的东西。

【问题讨论】：

标签： javascript jquery jquery-plugins smooth-scrolling

【解决方案1】：

Ajma 的回答应该足够了，但为了完整性：

alert(location.hash)

编辑：一个更完整的例子：

// on document.ready {
if (location.hash != '') {
    var a = $("a[name=" + location.hash.substring(1) + "]");
    // note that according to w3c specs, the url hash can also refer to the id
    // of an element. if so, the above statement becomes
    // var a = $(location.hash);
    if (a.length) {
        $('html,body').animate({
            scrollTop: $(a).offset().top
        }, 'slow');
    }
}
// }

【讨论】：

感谢您提供更多信息。我看到了一个问题，尽管似乎在 URL 中有一个哈希的简单存在似乎使它直接跳到页面上的那个书签，而不是让 jquery 使用平滑滚动来处理它。我想知道是否不是在 url 中使用 #bookmark 从 Page2 链接到 Page1，我是否需要使用类似 ?bookmark 的东西，然后寻找一个？而不是散列，然后平滑滚动到它在 ? 之后找到的那个书签。
这是位置。搜索后面的东西？
我看到了问题。您可以使用文档中实际上不存在的假哈希 (#detail-foo)，然后让 jQuery 滚动到 div[id=detail] 或 a[name=detail]，但这并不优雅。它实际上值得作为一个单独的问题发布。
优秀的建议萨尔曼，谢谢，是的，我想我会将此作为一个新问题发布，以防万一有更优雅的解决方案。谢谢。
还需要注意的是，使用“html, body”作为选择器是因为有些浏览器需要html标签来为滚动设置动画，而有些浏览器需要body标签来滚动。 jQuery 将同时选择两者并尝试为滚动在两者上 设置动画。这不是问题，预期的效果仍然相同。但是，如果您在动画完成后添加要执行的完整函数，则该逻辑将执行两次（！）。通过在完整的函数逻辑开始时设置一个局部布尔变量检查提前退出来解决这个问题。

【解决方案2】：

有可能，您想在页面加载完成后调用平滑滚动功能。在 jQuery 中，它使用 $(document).ready(function () { your code } );

您需要输入一些内容来解析您的网址以提取#bookmark，然后调用平滑滚动。

【讨论】：

太好了，谢谢。我不认为你会知道如何使用 javascript 来做到这一点（我的意思是，从 url 中提取 #bookmark）？