jQuery scrollUp - jQuery滚动到顶部插件

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

当网页内容过长,你浏览到底部需要回到顶部时,是不是希望“一键直达”呢?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

演示 下载

相关文章

escape()、encodeURI()、encodeURIComponent()区别详解

JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decod...

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

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

CSS透明属性详解

CSS透明属性详解

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

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

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

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

CSS 背景图拉伸 兼容 FF Chrome IE 等主流浏览器

相信各位一定碰到过这种情况,按钮作为DIV的背景图来显示,实际上有多个这样的按钮,而且DIV中的文字,也就是按钮上要显示的文字内容和个数都不定,这种情况下就需要用背景图片拉伸效果来处理了,只需做一个按...

DIV+CSS如何让文字垂直居中?

在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中...

发表评论

访客

看不清,换一张

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