jQuery scrollUp - jQuery滚动到顶部插件

飘逸的风13年前 (2013-03-20)前端9464

当网页内容过长,你浏览到底部需要回到顶部时,是不是希望“一键直达”呢?scrollUp 就是这样一款插件,它能够让用户滚动条滚动到一定的位置时(可设置),右下角出现“滚动到顶部”的按钮,点击后,页面就是慢慢的滚动到顶部,而不是硬生生的直接回到顶部,提高了用户体验。

scrollUp 还提供了 3 种主题,在 css 文件夹下。当然你可以自定义。

scrollUp演示截图

使用方法

引入文件

<script src="js/jquery.min.js"></script>
<script src="js/jquery.scrollUp.min.js"></script>

调用方法

$(function () {
    $.scrollUp();
});

参数

参数 说明
scrollName 绑定 id,默认为 scrollUp
topDistance 滚动条距离顶部多少距离时出现按钮,单位为 px,默认为 300
topSpeed 滚动到顶部的时间,单位为 ms,默认为 300
animation 按钮出现、隐藏的方式,可选 fade(淡入淡出)、slide(滑块)或 none(无)
animationInSpeed 按钮出现的时间
animationOutSpeed 按钮隐藏的时间
scrollText 按钮内的文字,默认为 Scroll to top
activeOverlay 是否显示参考线,值为十六进制颜色值或 false,默认为 false

自定义

你可以通过 CSS 自定义按钮,让按钮更适合你的项目。例如:

#scrollUp {
    bottom: 20px;
    right: 20px;
    padding: 10px 20px;
    background: #555;
    color: #fff;
}

scrollUp 官方介绍:https://markgoodyear.com/2013/01/scrollup-jquery-plugin/

scrollUp github 地址:https://github.com/markgoodyear/scrollup

演示 下载

相关文章

js 字符串操作函数集合

concat() – 将两个或多个字符的文本组合起来,返回一个新的字符串。  indexOf() – 返回字符串中一个子串第一处出现的索引。如果没有匹配项,返回 -1 。  c...

让Div浮动层浮在Flash上面下去,div在flash上,层在flash上

直接复制如下代码做swf显示代码 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="https://...

JS window.close()关闭新窗口,怎样才不会有提示?

最近做到的项目,把以前写过的关闭新窗口页面代码拿来直接用,结果在IE浏览器下,关闭时有一个关闭提示。这样对于一些有强迫症的人来说,是一个难以接受的梗。因此找了不少资料,总算有了解决方法,以下是分享。...

CSS透明属性详解

CSS透明属性详解

透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码: .transparent_class { filter:alpha(opacity=50); -moz-opac...

css防止ul下的li换行代码

css防止ul下的li换行代码

完成效果图:  出现问题的效果图: 由于我做的页面品牌那里要展示的品牌名称肯定是有长有短,所以无法给li定义width,所以我只给li加了个float,在火狐和ie8下li更够自...

网页个性字体——迟到的中文 WebFont

网页个性字体——迟到的中文 WebFont

三年前,有一个设计师面试一位 Web 前端工程师,其中有一段这样的对话: “如果设计师希望用图片实现某个字体样式,而从技术的角度来说这样不合理,但设计师非常坚持,这时候你怎么办?” “我会给设计师...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。