前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js点击按钮返回页面顶部

js点击按钮返回页面顶部

作者头像
OECOM
发布2020-07-01 17:28:05
25.1K0
发布2020-07-01 17:28:05
举报
文章被收录于专栏:OECOM

2016-08-22 03:08:28

在进行官网一类的网站建设时,经常会出现页面太长的现象,当用户滚动滚动条到最底部时返回顶部需要滚动多下滚动条,用户体验相当不好,于是就出现了当滚动条滚动到一定位置后出现返回顶部按钮,点击该按钮返回顶部,并且有一定的效果。

通常情况有两种方法,先来说第一种方法。

该方法就是利用锚点的方式来返回顶部。即给最顶部的div设置一个id,然后a标签的链接地址写成该id,当点击时就会返回顶部,但是缺点为过于突兀,因为是立即返回顶部。来看一下代码吧:

代码语言:javascript
复制
<body>
<div id="top"></div>
<a href="#top">返回顶部</a>
</body>

上面代码当滚动条滚动到一定位置后出现该a标签,且该a标签的position值为fixed,始终固定为浏览器的某一特定位置。点击a标签即会返回到顶部div所在位置

再来看第二种方式

第二种方式相对来说比较人性化,看起来也比较舒服,直接先来看代码吧

代码语言:javascript
复制
<body>
<div>落帆亭博客专注web前端开发</div>
<a class="top-link" href="#">返回顶部</a>

<script>
$(".top-link").click(function(){
     $('body,html').animate({scrollTop:0},1000);
     return false;
});
</script>
</body>

a标签的样式和方式和第一种方式相同,只不过给其添加了一个点击事件,此事件需要进入jquery.js文件,点击之后滚动条会有一个滚动过程,不是一下子回到顶部,个人感觉不错。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016-08-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
网站建设
网站建设(Website Design Service,WDS),是帮助您快速搭建企业网站的服务。通过自助模板建站工具及专业设计服务,无需了解代码技术,即可自由拖拽模块,可视化完成网站管理。全功能管理后台操作方便,一次更新,数据多端同步,省时省心。使用网站建设服务,您无需维持技术和设计师团队,即可快速实现网站上线,达到企业数字化转型的目的。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档