返回顶部demo

最新推荐文章于 2021-12-14 20:57:43 发布

xianhenyuan

最新推荐文章于 2021-12-14 20:57:43 发布

阅读量111

点赞数

分类专栏：其他文章标签：返回顶部demo 返回顶部

本文链接：https://blog.csdn.net/xianhenyuan/article/details/90903043

版权

其他专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、html 页面代码如下

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>返回顶部demo</title>
    <style>
        .to-top { display: none; padding: 10px;  color: #fff; background-color: #f50;}
    </style>
</head>
<body style="height: 111110px;width:800px;border:  1px dashed black;">

<a class="to-top">TOP</a>
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./jquery.toTop.min.js"></script>
</body>
</html>

二、jquery.toTop.min.js 代码如下：


!function(o){o.fn.toTop=function(t){var i=this,e=o(window),s=o("html, body"),n=o.extend({autohide:!0,offset:420,speed:500,position:!0,right:15,bottom:30},t);i.css({cursor:"pointer"}),n.autohide&&i.css("display","none"),n.position&&i.css({position:"fixed",right:n.right,bottom:n.bottom}),i.click(function(){s.animate({scrollTop:0},n.speed)}),e.scroll(function(){var o=e.scrollTop();n.autohide&&(o>n.offset?i.fadeIn(n.speed):i.fadeOut(n.speed))})}}(jQuery);$(function(){ $('.to-top').toTop({ autohide: true,offset: 1,speed: 100,position: true,right: 10,bottom: 10 });})

最后的效果：
在这里插入图片描述