15年软件开发经验,只做源码定制!

原创设计定制开发

满足您的个性化需求

当前位置：首页前端开发 H5

0 0

点击按钮实现返回顶部效果

苗成龙| 发布于 2021-10-13 08:49:15| 665阅读| 0点赞| 0评论

打开网页，页面数据很多时我们会发现很多网站右下角会有一个返回顶部的小图标，点击小图标后页面就可以快速的返回到顶部。

打开网页，页面数据很多时我们会发现很多网站右下角会有一个返回顶部的小图标，点击小图标后页面就可以快速的返回到顶部。这可以通过jQuery实现。

1.首先用HTML创建返回顶部按钮

<div class="fanh" id="to_top" href="javascript:void(0)"> 
     <img src="img/sss.png" alt=""/> 
  </div>

2.用css给它搭建样式，并且用定位把它固定在屏幕右下角。

<pre><code class="CSS"><xmp>.fanh{ width:40px; height: 40px; border-radius: 5px; background: #de194b; position: fixed; bottom: 50px; right: 50px; } .fanh img{ width:20px; height: 20px; margin-top: 10px; margin-left: 10px; }

3.引入jQuery文件，可以到官网下载下来，放入js文件夹中。

4.在标签中写jquery代码。

<script>
$(document).scroll(function() {
var top = $(document).scrollTop();
if (top < 300) {
$('#to_top').hide();
} else {
$('#to_top').show();
}
})
$('#to_top').click(function() {
$('body,html').animate({
scrollTop: 0
}, 500);
})
</script><br/><br/>

5.最后通过jquery代码就完成了。