页面添加置顶返回按钮

最新推荐文章于 2021-07-20 21:16:09 发布

木易66丶

最新推荐文章于 2021-07-20 21:16:09 发布

阅读量818

点赞数 2

分类专栏：前端js css

本文链接：https://blog.csdn.net/q_qman/article/details/89674073

版权

前端js 同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

网页添加置顶返回按钮

    <div class="this-topping" style="display: none;">
        <span class="icon iconfont icon-dingbu"></span>
    </div>

        $(window).scroll(function(event) {
			/* Act on the event */
			if($(this).scrollTop()==0){
				$(".this-topping").hide(300);
			}
			if($(this).scrollTop()!=0){
				$(".this-topping").show(300);
			}
		});	
		$(".this-topping").click(function(event) {
			/* Act on the event */
			$("html,body").animate({
				scrollTop:"0px"},
				666
			)
		});
<style>
    .this-topping{
        position: fixed;
        bottom: 60px;
        right: 10px;
        width: 40px;
        height: 40px;
        line-height: 40px;
        border-radius: 50%;
        background-image: url(/static/assets/mobile/img/go-top.png);
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
    }

</style>