WithCoderWithCoderWithCoder

jQuery实现Scroll to Top滚动到页面顶部

    在开发html页面时,如果页面内容很长,在页面上经常会给浏览者提供一个快速/自动滚动到页面顶部的控件。今天在实现页面从底部滚动到页面顶部功能时,发现了一个比较好用的jquery插件,使用比较简单,本文记录下来,方便后续使用。

    插件下载地址:

    http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm

    这个插件实现了滚动到绝对位置(从页面顶部)或页面上特定元素的能力,此插件依赖jquery。它在窗口右下角显示一个固定的控件,当单击该控件时,页面将滚动到顶部(图片可以修改)。而且,该脚本还可以让使用者设置一个偏移位置(以像素为单位),当滚动超过偏移位置之后才显示滚动控件。

    另外,除了显示一个固定的控件外,还可以使用一个特殊的href值(即:#top),在页面上定义任意的锚点链接,当单击该链接时,将激活脚本并将页面回滚到顶部。

    演示:

    1. 默认向下滚动页面(至少100像素),可以看到“Back to Top”控件出现在窗口的右下角。

    1-20040R149343E.png

    插件默认需要向下滚动100像素才会出现回到顶部插件,以上代码运行结果如下:

    1-20040R15112915.png

    2. 另外,可以添加一个a超链接,将href属性设置为#top,也可以回到顶部    

    <a href="#top">回到顶部</a>

    在以上的代码中添加一个a,运行结果如下:

    1-20040R15642b4.png

    这时,我们不仅可以点击右下角的控制图标,也可以点击“回到顶部”,让页面滚动到顶部。

    总的来说,这个插件代码量不大,配置也比较简单,更多的设置,可以看自己修改插件代码或参考文章开头给出的插件地址。

欢迎分享交流,转载请注明出处:WithCoder » jQuery实现Scroll to Top滚动到页面顶部