平滑滚动到HTML书签
我有下面的标记平滑滚动到HTML书签
<!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滚动。
我还可以解析为包含#
联系,并添加JavaScript的onclick smoothScoll(bookmark_name)
事件和删除书签这样的链接也只是'#'
然后在smoothScroll
做滚动和它#后添加到地址栏链接的DOM 。
我想学习使用javascript而不是jQuery来做到这一点。
任何人都有这样做的想法。我想离开HTML原样并在我的initPage()
中添加javascript事件,这意味着我知道 javascript已启用。
感谢
马特
您可以在a#href
元素添加一个点击监听器,并确保点击返回假,这样你就否定UA滚动。之后,您将不得不手动滚动或动画滚动属性以匹配链接的偏移顶部。
这是js小提琴使用jQuery让你去:http://jsfiddle.net/ZtbVQ/1/。您只需将jQuery调用转换为纯js调用即可。
好的,我会看看jQuery的功能。 – 2011-03-31 12:24:04
我不想在理想情况下使用jQuery,我想用普通的Javascript来解决它。 – 2011-03-31 12:21:12
http://demos.flesler.com/jquery/scrollTo/
有了这个插件,你会很容易 滚动溢出的元素,以及 屏幕本身。它允许您访问 许多不同选项来自定义 以及指定滚动的位置的各种方式。
这很简单,如果你使用jQuery。你必须有一个非jQuery的答案? – 2011-03-31 11:41:19
我只想知道如何以这种方式操纵DOM,因为我想使用HTML5 History API,并且允许我为我正在执行的网站更加自定义我的JS代码。我会在这个周末弄清楚。 – 2011-03-31 12:26:56