回到顶部效果 js+css

最新推荐文章于 2023-01-13 10:49:10 发布

shl999

最新推荐文章于 2023-01-13 10:49:10 发布

阅读量287

点赞数

分类专栏： javascript 文章标签： css javascript

本文链接：https://blog.csdn.net/u014665035/article/details/52369903

版权

javascript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

css和js部分：

<style type="text/css">
        body{height:5000px; }
        .top{background-color: #0a131a;color:#fff;width:50px;height:50px;display: none;
            position: fixed;right:20px;bottom:40px;}
    </style>
    <script>
    $(document).ready(function () {
        $(window).scroll(function () {
            if($(document).scrollTop()>=120){
                $(".top").fadeIn(3000);
            }else{
                $(".top").fadeOut(3000);
            }
        });
        $('.top').click(function(){
            $('html,body').animate({scrollTop: '0px'}, 2000);//缓慢回到顶部
        });
    })
    </script>

html部分：

<body >
<div>
    <a href="#" class="top">top</a>
</div>
</body>

另： jq插件下载传送门：http://pan.baidu.com/s/1geAMIgr

使用方法—
1.引用jquery库和jquery.goup.min.js到你的页面

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.goup.min.js"></script>

在调用下插件就OK了。

<script type="text/javascript">
        $(document).ready(function () {
            $.goup({
                trigger: 100,
                bottomOffset: 150,
                locationOffset: 100,
                title: 'This is a Demo',
                titleAsText: true
            });
        });
</script>