jQuery scrollUp - jQuery滚动到顶部插件

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

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

写PHP代码是我们可以使用is_array()方法来检测一个变量是否是数组,使用in_array()来判断一个变量是否包含在一个数组中,那么在JS中我们该,如何来判断呢?   下面来分享...

jQuery插件 图片放大镜-Cloud Zoom

jQuery插件 图片放大镜-Cloud Zoom

图片放大镜效果是一种不错的效果,多应用于电子商务、图片展示等网站,给用户带来更好的体验。实现这种效果的代码不少,今天要给大家介绍的是 Cloud Zoom,它是 jQuery 的一个插件。和其他产品相...

jQuery下拉框美化插件DropKick

jQuery下拉框美化插件DropKick

DropKick 是一个下拉框美化插件,使用非常简单,直接为下拉框 select 调用方法即可,瞬间让你摆脱繁琐。DropKick 有 3 种主题,你可以选择一种与你的页面更加搭配的,当然你也可以自己...

js控制在网页中禁用右键和禁止另存为的代码

禁止网页右击,选择,最简单的两句代码: <script type="text/javascript"> <!-- document.oncontextmenu=n...

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

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

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

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

发表评论

访客

看不清,换一张

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