平滑滚动到 HTML 书签

发布于 2024-10-28 18:13:15 字数 1442 浏览 3 评论 0原文

我有以下标记

<!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技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

月下伊人醉 2024-11-04 18:13:15

您可以在 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.

内心激荡 2024-11-04 18:13:15

看一下 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

欢烬 2024-11-04 18:13:15

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

有了这个插件,您将轻松
滚动溢出的元素,并且
屏幕本身。它使您可以访问
许多不同的选项可供定制
以及指定去往何处的各种方式
滚动。

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

With this plugin, you will easily
scroll overflowed elements, and the
screen itself. It gives you access to
many different options to customize
and various ways to specify where to
scroll.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文