平滑滚动到HTML书签

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部分。 然后，您可以通过单击Back to top navigation 。

这将适用于所有浏览器。

我想要做的是以某种方式添加一个JavaScript侦听器，以便如果在浏览器中启用了Javascript，它将侦听书签并平滑滚动到书签。

想一想，我可以在位置栏上添加一个onchange侦听器，解析位置并检查#之后的内容。 我可以在此字符之后获取文本的元素id并实现平滑的滚动算法？ 我认为这不会否定UA滚动。

我还可以解析包含#链接的链接的DOM，并添加javascript onclick smoothScoll(bookmark_name)事件并删除书签，这样链接将只是'#'然后在smoothScroll进行滚动并将其添加到位置栏之后＃

我想学习使用javascript而不是jQuery来做到这一点。

任何人都有这样做的想法。 我想保留HTML，并在initPage()添加javascript事件，这意味着我知道 javascript已启用。

谢谢

马特

Answer 1

您可以在a#href元素上添加一个点击侦听器，并确保该点击返回false ，这将使UA滚动无效。 之后，您将必须手动滚动或设置scrolling属性的动画以匹配链接的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 个解决方案

解决方案1
1 已采纳 2011-03-31 11:35:51

解决方案2
0 2011-03-31 11:16:03

解决方案3
0 2011-03-31 11:17:08

平滑滚动到HTML书签

问题描述

3 个解决方案

解决方案1 1 已采纳 2011-03-31 11:35:51

解决方案2 0 2011-03-31 11:16:03

解决方案3 0 2011-03-31 11:17:08

解决方案1
1 已采纳 2011-03-31 11:35:51

解决方案2
0 2011-03-31 11:16:03

解决方案3
0 2011-03-31 11:17:08