【前言】
经常看到网页中有回到顶部的效果，今天也研究一下回到顶部有哪些方法。众所周知，用锚链接是实现回到最简单的方法，但是从用户体验效果来说，并不是最好的。（锚链接回到顶部时太快了，而且用户可能在看到某个感兴趣的东西想停下来，却停不下来）
【主体】
针对上面的缺点，我们试着用Javascript的方法来得到实现。思路是这个样子的：
1、首先用html和css构建基本的例子，代码如下
html部分：
<div class="box">
<img src="1.jpg"/>
</div>
<a href="javascript:;" id="btn" title="回到顶部"></a>
css部分：
.box { width: 1190px; margin: 0 auto; }
#btn{ width: 40px; height: 40px; position: fixed; right: 0px; bottom: 60px; background: url(2.jpg) no-repeat left top; }
#btn:hover{ background: url(2.jpg) no-repeat left -40px; }
在这里应该注意的是：href="javascript:;"的目的是为了阻止浏览器默认行为。
2、下面我们就可以用Javascript来控制我们的例子
a、首先模仿锚链接回到顶部的效果，代码如下：
window.onload = function(){
var obtn = document.getElementById('btn');
obtn.onclick = function(){
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
document.documentElement.scrollTop = document.body.scrollTop = -200;
};
}
这里的效果为，鼠标每点击一次，向上移动200像素（200像素是可以变化的），然后我们发现每次都要点击觉得很麻烦，这里我们不妨为它添加一个定时器函数
b、添加定时器函数，代码如下：
var timer = null;//在前面声明
timer = setInterval(function(){},30);//里面接的是移动200px效果
在这里，我们觉得还不是那么的好，比如说“别人家”的效果距离顶部越近的时候，速度越慢；并且我们中间还有一个问题就是回到顶部之后，在想继续往下看时不会继续往下了。
c、清除定时器效果并控制回到顶部的速率，代码如下：
//改变回到顶部的速度
var isSpeed = Math.floor(-osTop/6)
document.documentElement.scrollTop = document.body.scrollTop = osTop + isSpeed;
//清除定时器效果
if(osTop == 0){
clearInterval(timer);
}
到这里，我们的效果差不多完成了，但是还是不能在滚动条滚动的时候，看到感兴趣的内容停下来。
d、滚动条滚动即停，代码如下：
var isTop = true;//先声明
//滚动条滚动时触发
window.onscroll = function(){
if(!isTop){
clearInterval(timer);
}
isTop = false;
};
isTop = true;//添加在obtn.onclick事件的timer中
到这里，我们还有一点小小的地方可以改动，就是当在可视窗口中，回到顶部是不出现的，到达一定值后才出现
e、回到顶部的显示与隐藏，代码如下：
/*在css中添加如下代码：*/
#btn{display: none;}
//获取页面的可视窗口高度
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
/*在window.onscroll中添加如下代码，控制显示与隐藏*/
//在滚动的时候增加判断
var osTop = document.documentElement.scrollTop || document.body.scrollTop;//特别注意这句，忘了的话很容易出错
if (osTop >= clientHeight) {
obtn.style.display = 'block';
}else{
obtn.style.display = 'none';
}
这样，回到顶部的效果就实现了，我们在看下完整的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>返回顶部练习</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
height: 2000px;
width: 100%;
}
.to_top{
width: 60px;
height: 60px;
position: fixed;
bottom: 20%;
right: 20px;
font-size: 40px;
line-height: 70px;
border: none;
background: rgba(0,0,0,0.2);
cursor: pointer;
opacity: 0;
/*display: none;*/
transition: all 1s;
}
.to_top:hover{
background: rgba(0,0,0,0.4);
color: white;
}
</style>
</head>
<body>
<button class="to_top">^</button>
<script type="text/javascript">
window.onload =function(){
var timer = null;//时间标识符
var isTop = true;
var obtn = document.getElementsByClassName('to_top')[0];
obtn.onclick = function(){
// 设置定时器
timer = setInterval(function(){
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
//减小的速度
var isSpeed = Math.floor(-osTop/6);
document.documentElement.scrollTop = document.body.scrollTop = osTop+isSpeed;
//判断，然后清除定时器
if (osTop == 0) {
clearInterval(timer);
}
isTop = true;//添加在obtn.onclick事件的timer中
},30);
};
//获取页面的可视窗口高度
var client_height = document.documentElement.clientHeight || document.body.clientHeight;
//滚动条滚动时触发
window.onscroll = function(){
//在滚动的时候增加判断,忘了的话很容易出错
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
if (osTop >= client_height) {
obtn.style.opacity = '1';
}else{
obtn.style.opacity = '0';
}
if(!isTop){
clearInterval(timer);
}
isTop = false;
};
}
</script>
<!-- DOM：
1、document.getElementById()
2、document.documentElement.scrollTop
3、document.body.scrollTop
事件：
1、window.onload
2、window.onscroll
3、obtn.onclick
定时器的使用：
1、setInterval(function(){},30)
2、clearInterval(timer) -->
</body>
</html>
到这里，还要小结一下，在中间我们运用的知识点：
知识点回顾：
DOM：
1、document.getElementById()
2、document.documentElement.scrollTop
3、document.body.scrollTop
事件：
1、window.onload
2、window.onscroll
3、obtn.onclick
定时器的使用：
1、setInterval(function(){},30)
2、clearInterval(timer)
.
分享到：
相关推荐
这个"原生JS实现的平滑返回顶部特效源码.zip"文件包含了一个使用JavaScript（尤其是原生JS，即非jQuery等库）编写的实现该功能的代码示例。以下是对这个知识点的详细说明： 首先，平滑返回顶部特效的核心在于模拟...
在我们的回到顶部库中，它将用来检测当前页面的滚动位置，并决定何时显示或隐藏返回顶部的按钮。 二、创建HTML结构 首先，我们需要在页面底部添加一个"回到顶部"的按钮，通常是一个锚点（a标签）或者自定义的HTML...
下面是一个简洁的原生JS实现返回顶部组件的示例： ```javascript var BackTop = function (domE, distance) { if (!domE) return; var _onscroll = window.onscroll, _onclick = domE.onclick; window....
【原生JS实现返回顶部缓冲效果】是一种常见的网页交互功能，它允许用户通过点击一个按钮快速将页面滚动回到顶部，并且在滚动过程中提供平滑的动画效果，提高用户体验。以下是对这一功能的详细解释和实现步骤： ### ...
在JavaScript编程中，"点击返回顶部"功能是一个常见的交互设计，它允许用户通过单击一个按钮迅速滚动到页面的顶部，提升用户体验。本教程将详细解释如何实现这一功能。 首先，我们需要在HTML中创建一个返回顶部的...
在本项目中，我们将探讨如何使用原生JavaScript、HTML和CSS技术来实现京东首页的一些关键交互功能，包括搜索框、菜单栏的滑动弹回、倒计时、Banner动画以及页面缓慢返回顶部的效果。这些都是现代网页开发中常见的...
当页面滚动条下滑到一定的位置出现返回顶部按钮，点击该按钮可以回到网页顶部，完全原生js编写，适用于js初学者
在这个项目中，我们将探讨如何使用原生JavaScript来实现四个常见的网页组件：返回顶部按钮、二级菜单、选项卡以及轮播图。 1. **返回顶部按钮**： 返回顶部按钮是一个常见功能，帮助用户快速将页面滚动回顶部。...
最后，是实现返回顶部功能的核心JavaScript代码。这段代码首先使用jQuery库（文档中通过`script`标签引入了`jquery.js`文件）来监听窗口的滚动事件（`scroll`）。当滚动事件触发时，会执行一个函数，这个函数通过...
63、原生JavaScript实现返回顶部的通用方法 64、原生JavaScript获得URL中GET参数值 65、原生JavaScript实现全选通用方法 66、原生JavaScript实现全部取消选择通用方法 67、原生JavaScript实现打开一个窗体通用方法 ...
5. **条件判断**：为了在页面滚动到底部或顶部时才显示返回顶部的按钮，需要通过JavaScript检查当前的滚动位置。例如，当滚动距离超过一定值时，显示按钮；当页面顶部可见时，隐藏按钮。 6. **事件处理**：当用户...
本篇文章将深入探讨如何实现这样一个兼容各大浏览器的弹性返回顶部代码。 首先，我们需要一个HTML结构来放置返回顶部的按钮。这个按钮通常被隐藏在屏幕底部或者右下角，只有当用户开始滚动页面时才会显示出来。一个...
2. CSS3实现：CSS3中的`transition`和`transform`属性可以实现简单的返回顶部动画效果，但无法监听滚动事件，通常需要配合JavaScript使用。 3. 原生JavaScript实现：对于不支持jQuery或想要减少依赖的项目，可以...
本例通过原生js实现了一个类似于淘宝首页的回到顶部按钮功能。该功能的实现主要涵盖了以下几个关键知识点： 1. **滚动监听（scroll事件）**： 当用户滚动页面时，需要监听滚动事件来实现特定效果。在这个例子中，...
在`index.html`文件中，可能包含了实现返回顶部功能的HTML结构和JavaScript代码。`index.jpg`可能是设计图，展示了返回顶部按钮的样式和布局。而`images`文件夹可能包含按钮图标或其他相关的图片资源。 总结，前端...
在技术实现层面，"返回顶部"功能的实现通常涉及到JavaScript、CSS以及HTML5等前端技术。在微信的网页版或小程序中，开发者会监听滚动事件，当用户滚动到页面底部一定距离时，"返回顶部"按钮会自动显示。点击按钮后，...
本文将详细讲解两种原生JS实现`offset`的方法。 首先，我们来看第一种实现方式，通过递归实现`offset`方法： ```javascript function offset(element) { var offest = { top: 0, left: 0 }; var _position; ...