Question

我有以下标记

<!DOCTYPE html>
<html>
    <head>
        <title>Blah</title>
    </head>
    <body>
        <header id='navigation'>
            <nav>
                <a rel='bookmark' href='#introduction'>Home</a>
            </nav>
        </header>
        <section id='content'>
            <section id='introduction'>
                <header>
                    <h1>Welcome</h1>
                    <a href='#navigation'>Back to top></a>
                </header>
            </section>
        </section>
    </body>
</html>

因此，您可以点击Home并使用书签转到introduction部分。然后，您可以点击navigation返回Back to top。

这适用于所有浏览器。

我想要做的是以某种方式添加一个javascript监听器，这样如果在浏览器上启用了Javascript，它就会监听书签并平滑滚动到书签。

大声思考，我可以在位置栏中添加onchange监听器，解析位置并在#之后检查任何内容。我可以在这个字符后得到文本的元素id，并实现平滑的滚动算法？我不认为这会否定UA滚动。

我还可以解析包含#个链接的链接的DOM，并添加javascript onclick smoothScoll(bookmark_name)个事件并删除书签，以便链接只有'#'然后在{{1滚动并将其添加到＃。

之后的位置栏

我想学习使用javascript而不是jQuery。

任何人都有这样的想法。我希望保留HTML原样并在我的smoothScroll中添加javascript事件，这意味着我知道 javascript已启用。

由于

马特

Answer 1

您可以在a#href元素上添加点击监听器，并确保点击返回 false ，这样您就会取消UA滚动。之后，您必须手动滚动或动画滚动属性以匹配链接的offsetTop。

这是一个使用jQuery来帮助你的js小提琴：http://jsfiddle.net/ZtbVQ/1/。您只需将jQuery调用转换为纯js调用。

Answer 2

看看Jquery滚动：

http://demos.flesler.com/jquery/scrollTo/

这可以让你做你想做的事。以下是对使用情况的一个很好的概述：

http://flesler.blogspot.com/2007/10/jqueryscrollto.html

Answer 3

http://demos.flesler.com/jquery/scrollTo/

使用此插件，您将很容易滚动溢出的元素，和屏幕本身。它让您访问许多不同的选项来定制以及指定去哪里的各种方法滚动。

平滑滚动到HTML书签

3 个答案: