网站用户浏览你的网站越容易,他们就越有可能留下来并进行转换。
这是一个jQuery返回顶部插件,使用户可以使用一个高度可定制的按钮平滑地滚动回您网站上任何页面的顶部,帮助您保持网站的粘性并产生潜在客户。
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数据
属性来自定义“返回页首”按钮。
- <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>