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

2024-01-27 14:29:52

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

一、效果图

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

二、实现方法

①、准备材料

你可以到该资源库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;
}

笑对现实的无奈，不能后退的时候，不再傍徨的时候，永远向前　路一直都在──陈奕迅《路一直都在》
本文出自:【沉默王二的博客】

码农公寓