关键词：
有些网站当滑到一定高度时右下角会有一个按钮，你只要一点就可以直接返回顶部了。那这个功能是怎么做到的呢。其实不算太难；
首先我们先在网页中创建一个按钮，上面写上返回顶部，把它的样式改成固定定位，之后想要什么样式都可以自己写上，再在上面设置一个id；
之后我们js中获取一下这个按钮的id，并且定义一个变量timer，方便接下来清除间隔器；
之后我们设置一个页面的滚动事件，在里面定义一个变量获取一下所滚动的高度；
再用一个判断语句来判断一下滚动的高度；我们在设置一个数来让按钮什么时候显示；
var oBtn = document.getElementById("btn");
var timer;
window.onscroll = function(){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop > 500){
oBtn.style.display = ‘block‘;
}else{
oBtn.style.display = ‘none‘;
}
}
之后在给按钮设置一个点击事件，我们要先清除一下间隔器来防止bug的出现，在判断一下现在所处的位置；再用一个变量来获取一下需要移动的距离；
之后再用一个变量来获取一下步长，再用一个变量来计算次数；之后设置一个间隔器，首先计算一下次数来，知道每次移动到什么位置，之后计算每次的位置，之后判断一下是否移动到顶部就行了
oBtn.onclick = function(){
clearInterval(timer);
var start = document.documentElement.scrollTop || document.body.scrollTop;
var dis = 0 - start;
var count = Math.floor(1000 / 30);
var n = 0;
timer = setInterval(function () {
n++;
var a = 1 - n / count;
var cur = start + (1 - Math.pow(a,3)) * dis;
document.documentElement.scrollTop = document.body.scrollTop = cur;
if(n == count){
clearInterval(timer);
}
},30)
}
原生js-返回顶部
html部分：<bodystyle="height:2000px"> <divid="div1"> 返回顶部 </div></body>css部分：#div1{ position:fixed; _position:absolute; right:0; bottom:0; width:200px; height:200px; b 查看详情
原生态js，返回至顶部
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>返回至顶部</title><styletype="text/css">*{margin:0;padding:0;}#top{width:50px;height:50px;background 查看详情
js返回顶部效果
...浏览的网页过于长的时候，用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部，不仅麻烦，而且用户体验也会很差。现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮，点击... 查看详情
原生js实现简洁的返回顶部组件
本文内容相当简单，所以没有发布到博客园首页，如果你不幸看到，那只能是我这篇文章的荣幸，谢谢你的大驾光临~返回顶部组件是一种极其常见的网页功能，需求简单：页面滚动一定距离后，显示返回顶部的按钮，点击该按... 查看详情
js返回顶部动画效果
//返回顶部functiongoTop(){//无动画效果document.body.scrollTop=0;document.documentElement.scrollTop=0;//简单动画效果$("html,body").animate({scrollTop:0},500);//由快到慢的效果scrollToptimer=setInterval(function(){console.log 查看详情
原生js实现缓动返回顶部
<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <styletype="text/css"> *{ padding:0; margin:0; } #box{ width:1366px; he 查看详情
右侧带返回顶部的的小导航栏(代码片段)
效果如图：悬浮改变效果点击咨询留言悬浮显示一个div 点击回到顶部页面慢慢滚动到顶部 全部代码如下：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>右侧导航栏</title><style>.side-nav 查看详情
vue3返回顶部组件及返回顶部js封装(代码片段)
...封装监听页面滚动的js，及页面滚动到一定像素时，显示返回顶部的按钮，点击按钮会有放大的动画，并逐渐滚动到顶部的组件。效果如下：代码封装js，监听屏幕滚动事件，以及是否显示返回顶部的按钮；在项目目录下新建utils... 查看详情
jquery如何实现回顶部带滑动效果
...#39;scrollTop':0,1000);这样不可以，能写一下具体的代码吗返回顶部：设置为body的scrollTop为0滑动效果：animate（Jquery的自定义动画）$("#returnTop").click(function () var speed=200;//滑动... 查看详情
原生js实现使滚动条缓慢回到顶部的效果
html部分（因为a标签有链接功能，此时最好不要用a包裹否则影响实现效果）<liid="btn-top">回到顶部</li>js部分vartop=document.getElementById("btn-top");varbottom=document.getElementById("btn-top");top.onclick=function(){//alert(11); 查看详情
js常用返回网页顶部几种方法
...即可： 代码如下复制代码<ahref="#top"target="_self">返回顶部</a>此方法效果是一次直接跳到顶部，而且URL地址栏会显示个#top， 查看详情
javascript--返回顶部效果
window.onload=function(){varobtn=document.getElementById(‘btn‘);//客户端页面可视区高度varclientHeight=document.documentElement.clientHeight;vartimer=null;varisStop=true;//判断在浏览器触发回到顶部时，用户是否滚动滚轮window.onscroll=f 查看详情
怎样用js写返回顶部的滑动效果
参考技术A实现原理：当页面加载的时候，把元素定位到页面的右下角，当页面滚动时，元素一直位于右下角，当用户点击的时候，页面回到顶部。要点一：document.documentElement.clientWidth||document.body.clientWidth；获得可视区的宽度。... 查看详情
js实现返回顶部功能的解决方案(代码片段)
很多网站上都有返回顶部的效果，主要有如下几种解决方案。1、纯js,无动画版本window.scrollTo(x-coord,y-coord);如：window.scrollTo(0,0);2、纯js，带动画版本生硬版：varscrollToTop=window.setInterval(function()varpos=wind 查看详情
模拟jd返回顶部功能(代码片段)
模拟JD返回顶部功能，添加在一定高度内隐藏功能。返回顶部的前端实现。涵盖的内容主要：前端样式（html排版），展示效果（CSS3动画），以及展示效果脚本的编写（javascript编写）HTML<!DOCTYPEhtml><html><headlang="en"><... 查看详情
js返回顶部
functiongotoTop(min_height){vargotoTop_html=‘<divid="gotoTop"></div>‘;//定义返回顶部的html标签，默认隐藏 $("body").append(gotoTop_html);//将元素插入页面 $("#gotoTop").click(function(){//定义返回顶部元素的点击事件 $(‘h 查看详情
androidlistview返回顶部，快速返回顶部的功能实现，详解代码。
...这个最终实现的效果图：我这里只是单纯的实现了ListView返回顶部的功能。具体效果大家可以适当地美化在实际项目中可以换图标，去掉右侧滚动条等。具体ui美化不做解释。好了，首先我们是当不在顶部的时候， 查看详情
返回顶部(代码片段)
返回顶部也是一个常见的效果，主要是在浏览较长的网页是，方便用户快速的回到顶部。首先是一个有滚动效果的长网页<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title><style>*margin:0;padding:0;l... 查看详情