jQuery scrollUp - jQuery滚动到顶部插件

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

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

在IE下经常有那个恼人的“网页上有错误”的提示,自己看到很闹心。相信初级用户看到很害怕。不过这个问题也是可以解决的!看看renaski的解决方案。 <script> window....

JS键盘控制翻页代码

<script language="javascript"> <!-- document.onkeydown=nextpage var prevpage="prev.html"...

jQuery自适应宽度导航插件Horizo​​ntalNav

jQuery自适应宽度导航插件Horizo​​ntalNav

Horizo​​ntalNav 是一个 jQuery 导航插件,能够自适应容器的宽度。如果你曾经在一个项目中创建过这种效果,你就会知道,这是很难处理的。但这个插件很容易,并且支持 IE6、IE7。...

jQuery操作Select的方法集合

jQuery获取Select选择的Text和Value:  语法解释:  1. $("#select_id").change(function(){/...

html+css 中 em和px 的尺寸解释

px像素(Pixel),相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 em是相对长度单位,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默...

jw player的快捷调用方法(附:jw player参数设定)

最近开发的项目需要调用一部分视频,找了很久,感觉有两个非常不错,一个是ckplayer(非常炫酷,网址:https://www.ckplayer.com/),感觉好奇的同学,可以访问他们的官网去看看;...

发表评论

访客

看不清,换一张

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