页面添加置顶返回按钮

最新推荐文章于 2024-05-03 10:09:37 发布

原创最新推荐文章于 2024-05-03 10:09:37 发布 · 944 阅读

1 ·

CC 4.0 BY-SA版权

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

36 篇文章

订阅专栏

css

7 篇文章

订阅专栏

本文介绍了一种在网页中添加置顶返回按钮的方法，通过使用jQuery监听滚动事件，当页面滚动到非顶部时显示按钮，点击后动画返回页面顶部。

网页添加置顶返回按钮

    <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>