返回顶部 jQuery+css实现

最新推荐文章于 2022-11-15 15:31:25 发布

廖宁波

最新推荐文章于 2022-11-15 15:31:25 发布

阅读量373

点赞数

分类专栏：前端文章标签： jquery css 返回顶部

本文链接：https://blog.csdn.net/u013126217/article/details/69604047

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、在需要添加返回顶部功能的页面的head标签中添加

<meta name="toTop" content="true">

2、添加js

$(document).ready(function($) {    
    if($("meta[name=toTop]").attr("content")=="true"){
        $("<div id='toTop'><i class='icon-circle-arrow-up' style='font-size: 40px;color: #1E90FF'></i></div>").appendTo('body');
        $("#toTop").css({
            width: '50px',
            height: '50px',
            bottom:'10px',
            right:'15px',
            position:'fixed',
            cursor:'pointer',
            zIndex:'999999',
        });
        if($(this).scrollTop()==0){
            $("#toTop").hide();
        }
        $(window).scroll(function(event) {
            if($(this).scrollTop()==0){
                $("#toTop").hide();
            }
            if($(this).scrollTop()!=0){
                $("#toTop").show();
            }
        }); 
        $("#toTop").click(function(event) {
            $("html,body").animate({
                scrollTop:"0px"},
                666
            );
        });
    }
});

注意：<i class='icon-circle-arrow-up' style='font-size: 40px;color: #1E90FF'></i>此段代码采用了bootstrap自带的图标，若没有采用bootstrap的话，
此处用图片代替即可，即<img src="url"></img>