动画滚动到页面顶部 jQuery返回页首.js

  • 源码大小:105.73KB
  • 所需积分:1积分
  • 源码编号:19JP-3639
  • 浏览次数:496次
  • 最后更新:2023年07月05日
  • 所属栏目:动画
本站默认解压密码:19jp.com 或 19jp_com

简介

网站用户浏览你的网站越容易,他们就越有可能留下来并进行转换。

这是一个jQuery返回顶部插件,使用户可以使用一个高度可定制的按钮平滑地滚动回您网站上任何页面的顶部,帮助您保持网站的粘性并产生潜在客户。

特征:

  • 自动淡入淡出。
  • 以可配置的持续时间平滑滚动到顶部。
  • 允许您将历史记录添加到浏览器中。
  • 可以设置为滚动到页面上的指定位置。当你有一个粘性的标题时很有用。
  • 清凉舒缓功能。需要第三方缓和库。
  • 根据麻省理工学院和GPLv2许可证获得双重许可。

如何使用它:

1.在jQuery之后将jQuery的缩小版加载回top.js插件。

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.backtothetop.min.js"></script>

2.创建一个位置固定的背靠顶部链接,指向顶部元素。就是这样。

<div id="top"></div>
<a href="#top" id="backtothetop-fixed">
  Back to the Top
</a>

3.或者在锚点链接上实现平滑滚动功能,使您可以将页面平滑滚动到页面的指定位置。

<a href="#" 
   id="backtothetop-fixed" 
   data-backtothetop-scrolltop="250">
   Scroll To 250px
</a>

4.对平滑滚动应用缓和功能。需要第三方库,如jQuery UI和jQuery easing.js插件。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<a href="#" 
   id="backtothetop-fixed" 
   data-backtothetop-easing="easeOutQuart">
   Scroll To Top
</a>

5.更多HTML数据属性来自定义“返回页首”按钮。

  • 数据返回页首持续时间:动画的持续时间。默认值:300。
  • 数据返回页首散列:将历史记录添加到浏览器中。默认值:false。
  • 数据返回页首偏移量:与顶部的距离。默认值:0。
  • 数据返回页首固定滚动偏移量:向下滚动页面以显示返回页首按钮的距离。默认值:0。
  • 数据返回顶部固定音量In:动画速度:慢速|正常|快速|值。默认值:“慢速”。
  • 数据返回顶部固定音量输出:动画速度:慢速|正常|快速|值。默认值:“慢速”。
  • 数据返回顶部固定显示:返回顶部按钮的位置:右下|左下|右上|左上。默认值:“右下角”。
  • 数据返回顶部固定顶部:上边距。默认值:0
  • 数据返回顶部固定底部:底部边距。默认值:0
  • 数据返回顶部固定左侧:左边距。默认值:0
  • 数据返回顶部固定右侧:右边距。默认值:0
  • 数据返回到顶部固定zindex:CSS z索引。默认值:999。
<a href="#" 
   id="backtothetop-fixed" 
   data-backtothetop-duration="600"
   data-backtothetop-easing="easeOutQuart"
   data-backtothetop-hash="true"
   data-backtothetop-offset="100"
   data-backtothetop-fixed-scroll-offset="500"
   data-backtothetop-fixed-fadeIn="1000"
   data-backtothetop-fixed-fadeOut="1000"
   data-backtothetop-fixed-display="bottom-right"
   data-backtothetop-fixed-bottom="10"
   data-backtothetop-fixed-right="10"
   data-backtothetop-fixed-zindex="9999">
   Scroll To Top
</a>

预览截图