JQuery 页面如何快速滚动到顶部?-阿里云开发者社区

开发者社区> 沉默王二> 正文

JQuery 页面如何快速滚动到顶部?

简介: JQuery 页面如何快速滚动到顶部?
+关注继续查看

JQuery 网页如何快速的滚动到顶部?现如今,页面元素不断丰富,就导致页面的纵深比较广,那么用户一旦阅读网页到了底部,就会产生一个快速滚动到顶部的需求,当然了,很多网页都这样实现了。


一、效果图


image.png


文档的右下侧出现一个向上滚动的按钮,鼠标点击后,就可快速的滚动的文档顶部。


二、实现方法


①、准备材料


你可以到该资源库jquery scrollUp下载,也可以到其官网下载。


②、导入文件

<link type="text/css" rel="stylesheet" href="${ctx}/components/awesome/css/font-awesome.min.css" />
<script type="text/javascript" src="${ctx}/components/scrollup/jquery.scrollUp.min.js"></script>


font-awesome作为scrollup的必需品。


③、设置scrollup的样式


// 启用scroll up
$(function() {
    $.scrollUp({
        scrollName : "scrollUp",
        topDistance : "300",
        topSpeed : 300,
        animation : "fade",
        animationInSpeed : 200,
        animationOutSpeed : 200,
        scrollText : '<i class="fa fa-angle-up"></i>',
        activeOverlay : !1
    });
});

这里用了font awesome中的式样“fa fa-angle-up”。


参数名 含义

scrollName 绑定 id,默认为 scrollUp

topDistance 滚动条距离顶部多少距离时出现按钮,单位为 px,默认为 300

topSpeed 滚动到顶部的时间,单位为 ms,默认为 300

animation 按钮出现、隐藏的方式,可选 fade(淡入淡出)、slide(滑块)或 none(无)

animationInSpeed 按钮出现的时间

animationOutSpeed 按钮隐藏的时间

scrollText 按钮内的文字,默认为 Scroll to top

activeOverlay 是否显示参考线,值为十六进制颜色值或 false,默认为 false

④、CSS样式表

#scrollUp {
    background-color: #777;
    border: medium none;
    bottom: 100px;
    color: #eee;
    font-size: 40px;
    height: 46px;
    line-height: 1;
    opacity: 0.8;
    overflow: hidden;
    right: 20px;
    text-align: center;
    text-decoration: none;
    width: 46px;
}
#scrollUp:hover {
    background-color: #333;
}

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10076 0
Bootstraptable页面上同时存在多条垂直滚动条,margin和padding无法消除页面间隙的解决办法!
控件:bootstraptable存在的问题:页面上同时存在多条垂直滚动条,margin和padding无法消除页面间隙。解决办法:1.关键词 overflow:hidden;2.结合页面高度设置;3.
1258 0
移动端弹出遮罩层时防止底部页面滚动
版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82696872 ...
1225 0
前端页面双向滚动方案
脱离canvas后,页面如何实现上下左右双滑动?又如何在安卓系统和iOS系统上实现?
61 0
从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN:https://blog.csdn.net/lvonve/ 在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。
1851 0
好程序员分享JQuery.get提交页面不跳转的解决方法
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.
3477 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13884 0
Jquery Ajax调用aspx页面方法
原文:Jquery Ajax调用aspx页面方法 在asp.net webform开发中,用jQuery ajax传值一般有几种玩法 1)普通玩法:通过一般处理程序ashx进行处理; 2)高级玩法:通过aspx.cs中的静态方法+WebMethod进行处理; 3)文艺玩法:通过WCF进行处理。
1180 0
+关注
沉默王二
微信搜索「沉默王二」,回复关键字「00」获取硬核计算机基础资料。
1084
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载
《2021云上架构与运维峰会演讲合集》
立即下载