平滑滚动到 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
部分。然后,您可以通过单击返回顶部
返回到导航
。
这适用于所有浏览器。
我想要做的是以某种方式添加一个 JavaScript 侦听器,这样如果浏览器上启用了 JavaScript,它就会侦听书签并平滑滚动到书签。
大声思考,我可以向位置栏添加一个 onchange
监听器,解析位置并检查 #
之后的任何内容。我可以获取该字符之后文本的元素id
并实现平滑滚动算法吗?不过,我不认为这会否定 UA 滚动。
我还可以解析包含 #
链接的 DOM 并添加 javascript onclick smoothScoll(bookmark_name)
事件并删除书签,这样链接就只是 '# '
然后在 smoothScroll
中进行滚动并将其添加到 # 之后的位置栏。
我想学习用 javascript 而不是 jQuery 来做到这一点。
任何人对此有任何想法。我想保持 HTML 不变,并在 initPage()
中添加 javascript 事件,这意味着我知道 javascript 已启用。
谢谢马特
I have the following markup
<!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>
So you can click on Home
and get to the introduction
section with a bookmark. You can then get back to the navigation
by clicking Back to top
.
This will work in all browsers.
What I want to do is add a javascript listener somehow so that if Javascript is enabled on the browser it listens for bookmarks and smooth scrolls to the bookmark.
Thinking out loud, I could add an onchange
listener to the location bar, parse the location and check for anything after a #
. I could get the element id
of the text after this character and implement a smooth scrolling algorithm? I don't think this would negate the UA scrolling however.
I could also parse the DOM for links that contain #
links and add javascript onclick smoothScoll(bookmark_name)
events and remove the bookmark so the link will just be '#'
then in the smoothScroll
do the scrolling and add it to the location bar after the #.
I would like to learn to do this with javascript and not jQuery.
Anyone got any ideas for doing this. I want to leave the HTML as is and add javascript events in my initPage()
which means that I know javascript is enabled.
Thanks
Matt
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
![扫码二维码加入Web技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
您可以在
a#href
元素上添加点击监听器,并确保点击返回 false,这样您将取消 UA 滚动。之后,您必须手动滚动或设置滚动属性的动画以匹配链接的 offsetTop。这是一个使用 jQuery 的 js 小提琴: http://jsfiddle.net/ZtbVQ/1/。您只需将 jQuery 调用转换为纯 js 调用。
You can add a click listener on your
a#href
elements, and ensure that the click returns false, this way you will negate the UA scroll. After that, you'll have to manually scroll or animate the scrolling property to match the link's offsetTop.Here's a js fiddle using jQuery to get you going: http://jsfiddle.net/ZtbVQ/1/. You only have to translate the jQuery calls to pure js calls.
看一下 Jquery 滚动:
http://demos.flesler.com/jquery/scrollTo/
这应该可以让你做你想做的事。以下是关于用法的一个很好的概述:
http://flesler.blogspot.com/2007/10 /jqueryscrollto.html
Take a look at Jquery scroll:
http://demos.flesler.com/jquery/scrollTo/
This should let you do what you want. Here is a good overview on useage:
http://flesler.blogspot.com/2007/10/jqueryscrollto.html
http://demos.flesler.com/jquery/scrollTo/
http://demos.flesler.com/jquery/scrollTo/