15年软件开发经验 只做源码定制 互联网+定制化解决方案

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

原创设计 定制开发

满足您的个性化需求

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

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

苗成龙| 发布于 2021-10-13 08:49:15| 578阅读| 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代码就完成了。



0

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

苗成龙
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部