javascript实现页面中回到顶部功能

当一个页面比较长的时候，在下拉页面到一定长度的时候，页面右下角通常会出现一个回到顶部的图标，点击即可以回到页面顶部，本案例对这一功能进行了简单实现。当页面下拉到一定长度后，页面右下角出现一个回到顶部图标，点击之后，页面会滑动到页面顶部，同时回到顶部图标也会消失。适合初学者参考。

<!doctype html>
<html><head><meta charset="UTF-8"><title>Document</title><style>.return-top{width:100px;height:100px;font:bold 50px/100px "宋体";color:#fff;background-color:purple;position:fixed;bottom:20px;right:20px;text-align:center;cursor:pointer;display:none;}.return-top.active{display:block;}</style></head><body><h1>大鹏一日同风起，扶摇直上九万里。</h1><h1>大鹏一日同风起，扶摇直上九万里。</h1><h1>大鹏一日同风起，扶摇直上九万里。</h1><h1>大鹏一日同风起，扶摇直上九万里。</h1><h1>大鹏一日同风起，扶摇直上九万里。</h1><h1>大鹏一日同风起，扶摇直上九万里。</h1><h1>大鹏一日同风起，扶摇直上九万里。</h1><h1>大鹏一日同风起，扶摇直上九万里。</h1><h1>大鹏一日同风起，扶摇直上九万里。</h1><h1>大鹏一日同风起，扶摇直上九万里。</h1><h1>大鹏一日同风起，扶摇直上九万里。</h1><h1>大鹏一日同风起，扶摇直上九万里。</h1><h1>大鹏一日同风起，扶摇直上九万里。</h1><h1>大鹏一日同风起，扶摇直上九万里。</h1><h1>大鹏一日同风起，扶摇直上九万里。</h1><h1>大鹏一日同风起，扶摇直上九万里。</h1><h1>大鹏一日同风起，扶摇直上九万里。</h1><h1>大鹏一日同风起，扶摇直上九万里。</h1><h1>大鹏一日同风起，扶摇直上九万里。</h1><h1>大鹏一日同风起，扶摇直上九万里。</h1><h1>大鹏一日同风起，扶摇直上九万里。</h1><h1>大鹏一日同风起，扶摇直上九万里。</h1><h1>大鹏一日同风起，扶摇直上九万里。</h1><h1>大鹏一日同风起，扶摇直上九万里。</h1><h1>大鹏一日同风起，扶摇直上九万里。</h1><h1>大鹏一日同风起，扶摇直上九万里。</h1><h1>大鹏一日同风起，扶摇直上九万里。</h1><h1>大鹏一日同风起，扶摇直上九万里。</h1><h1>大鹏一日同风起，扶摇直上九万里。</h1><h1>大鹏一日同风起，扶摇直上九万里。</h1><h1>大鹏一日同风起，扶摇直上九万里。</h1><h1>大鹏一日同风起，扶摇直上九万里。</h1><h1>大鹏一日同风起，扶摇直上九万里。</h1><h1>大鹏一日同风起，扶摇直上九万里。</h1><h1>大鹏一日同风起，扶摇直上九万里。</h1><h1>大鹏一日同风起，扶摇直上九万里。</h1><h1>大鹏一日同风起，扶摇直上九万里。</h1><h1>大鹏一日同风起，扶摇直上九万里。</h1><div class="return-top" id="return_top">▲</div><script>/*思路：第一步：当页面加载完后，获取所要操作的 节点对象第二步：为window对象添加一个滚动条滚动事件onscroll第三步：在滚动条滚动的过程中，不断的获取滚动条距离顶部的距离数值当这个数值大于300的时候，显示出回到顶部图标否则，隐藏回到顶部图标第四步：为回到顶部图标添加一个点击事件，滚动条回到顶部。            */var return_top = document.getElementById("return_top");var sTop;window.onscroll = function(){//sTop :滚动条距离顶部的距离数值sTop = document.body.scrollTop||document.documentElement.scrollTop;if(sTop>300){return_top.className = "return-top active";}else{return_top.className = "return-top";}}return_top.onclick = function(){var termId = setInterval(function(){sTop-=50;if(sTop<=0){clearInterval(termId);}window.scrollTo(0,sTop);},1);       }</script></body>
</html>

本案例对回到顶部功能进行了简单实现，读者可以运行代码查看效果。

javascript实现页面中回到顶部功能相关推荐

html页面刷新回到顶部_HTMl页面中返回顶部的几种实现小结
这篇文章我们来讲一下在网站建设中,HTMl页面中返回顶部的几种实现小结.本文对大家进行网站开发设计工作或者学习都有一定帮助,下面让我们进入正文. 最近在开发网站需要制作返回顶部按钮,但是我主要为后端开 ...
锚点定位跳转到指定位置回到顶部功能
一.跳转到指定位置项目中数据较多,但是要在一个页面展示出来,就会需要定位功能. 例如淘宝中点击某个商品的分类会跳转到对应的模块,模块中是详细的商品信息数据 arrayList:[{ //不一一列出 ...
html页面刷新回到顶部_html回到页面顶部
js隐藏与显示回到顶部按钮现在大多数网站都会添加这种功能:当滚动条滚动到页面的下方时,页面的右下角会显示出来一个"回到顶部"的按钮或连接,点击该按钮后页面会跳转到顶部,或某一个适 ...
（7）＜a＞标签之锚点和回到顶部功能
一.什么是锚点? 这里,我们拿京东官网举例,如下图可以看到京东官网首页右侧的导航条选项卡,当我们点击其中一个选项卡的时候,他会自动给你定位跳到当前页的符合该选项卡标题的位置,省去我们从上往下鼠标滚轮一 ...
陪玩系统源码开发，H5页面中调用支付功能的实现
最近在陪玩系统源码开发工作中,有个H5页面需要实现微信支付和支付宝支付的功能,现在已经完成,抽个时间写出来,分享给有需要的人. 第一步:先判断当前环境判断陪玩系统源码中用户所属环境,根据环境不同,执 ...
浏览器刷新页面后回到顶部_JavaScript仿知乎回到顶部功能
一般的网站都有个回到顶部,回到顶部又有多种方法可以实现, 方法1: 在css中添加 html {scroll-behavior: smooth; } 然后在回到顶部按钮上加一个a标签,herf属性写顶 ...
浏览器刷新页面后回到顶部_当你在浏览器中，忘记了曾经的登录密码怎么办......
当你在浏览器中,忘记了曾经的登录密码怎么办... 前言你还在为使用浏览器的时候,忘记密码而烦恼吗?今天要分享的不为人知的小技巧,利用前端技术原理来帮助你找回原密码. 在我们使用各种网站登录时,总会勾 ...
android 点击状态栏,“点击状态栏回到顶部”功能的消失原因和实现
苹果系统为我们带来了一个很便利的功能,在长长的页面拖拽过程中,至于要点击一下顶部状态栏,便能回到页面最顶部,省去了漫长的滑动过程.但是有时在开发中,会遇到点击返回功能消失的现在,下面简单说说原因以及几 ...
vue 返回滚动条顶部组件_vue中回到顶部
1. 回到顶部,使用 scrollIntoView 方法: Element.scrollIntoView方法滚动当前元素,进入浏览器的可见区域该方法可以接受一个布尔值作为参数.如果为true,表示元 ...

javascript实现页面中回到顶部功能

javascript实现页面中回到顶部功能相关推荐

最新文章

热门文章