If there are no specific requirements, the third method is recommended
1. There is a buffer and the display and hiding of the button need to determine the position of the scroll bar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#btn {
position: fixed;
bottom: 0;
}
</style>
</head>
<body style="height: 10000px">
<a href=" " id="btn" style="display: none">回到顶部</a >
<script>
window.onload = function(){
var btn = document.getElementById ('btn');
// Get the view height;
var winH = document.documentElement.clientHeight;
// define the timer;
var timer = zero;
// Define whether to reach the top boolean value judgment;
var isTop = true;
// set scroll event;
window.onscroll = function(){
var toTop = document.body.scrollTop || document.documentElement.scrollTop;
// Determine whether the second screen is reached, if so, display the button;
if (toTop >= winH) {
btn.style.display = 'block';
}else{
btn.style.display = 'none';
};
// Determine whether to reach the top, if not, stop the timer;
if (!isTop) {
clearInterval(timer);
};
// reset the boolean value judgment;
isTop = false;
}
// Set button click event;
btn.onclick = function(){
// set timer, 50ms interval;
timer = setInterval(function(){
var toTop = document.body.scrollTop || document.documentElement.scrollTop;
// Set the speed, using the equation instead of the specific value is to produce an easing effect;
var speed = Math.ceil(toTop/5);
// Make a difference and produce an easing effect;
document.documentElement.scrollTop = document.body.scrollTop = toTop - speed;
// reset the boolean value judgment;
isTop = true;
// Determine whether the top is reached, if so, stop the timer;
if (toTop == 0) {
clearInterval(timer);
};
},50);
}
}
</script>
</body>
</html>
2. Click No Cache to jump to the top of the page:
① Use HTML anchor tags: the only disadvantage is that the style is not very good, and this anchor tag will be displayed in the url
<a name="top" id="top"></a> is placed as long as it is close to the top.
At the bottom of the page: <a href="#top" target="_self">back to top</a>
<a name="top"></a>
...
<div style="position: fixed; top: 529px; left: 1269px; display: block;">
<a href="#" title="back to top">
<img src="http://static.blog.csdn.net/images/top.png" alt="TOP"></a>
</div>
②Javascript Scroll function: <a href="javascript:scroll(0,0)">return to top</a>
The first parameter of scroll is the horizontal position, and the second parameter is the vertical position. For example, if you want to position it at 50 pixels vertically, scroll(0,50)
3. There is cache but the button is always at the bottom (absolute position)
<a onclick="pageScroll()" class="return-top">返回顶部</a>
//Write to the bottom of the page, just before </body>
function pageScroll()
{
//Scroll the content by the specified number of pixels (the first parameter is the number of pixels to scroll to the right, and the second parameter is the number of pixels to scroll down)
window.scrollBy(0,-100);
//Delayed recursive call to simulate the effect of scrolling up
scrolldelay = setTimeout('pageScroll()',100);
//Get the scrollTop value, declare the standard web page of DTD to take document.documentElement.scrollTop, otherwise take document.body.scrollTop; because only one of the two will take effect, the other will always be 0, so the sum value can get the page's the real scrollTop value
var sTop=document.documentElement.scrollTop+document.body.scrollTop;
/ / Determine when the page reaches the top, cancel the delay code (otherwise the page scrolls to the top and can no longer browse the page normally)
if(sTop==0) clearTimeout(scrolldelay);
}
Accumulate and expand:
The scrollTo() method scrolls the content to the specified coordinates, so it can also be written like this
<a href="Javascript:window.scrollTo(0,0)">back to top</a> //Equivalent to <a href onclick="window.scrollTo(0,0);">back to top</a>
The scrollBy() method can scroll the content by the specified number of pixels (right, bottom);
The setTimeout() method is used to call a function or evaluate an expression after a specified number of milliseconds (timed calls)
The clearTimeout() method cancels the timeout set by the setTimeout() method
The scrollTop() method returns or sets the vertical position of the scrollbar of the matched element
The timing call method can be used for the timer. The code is as follows: (one second is added, and the timing is terminated after clicking stop)
<html>
<head>
<script type="text/javascript">
var c=0
there is t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
function stopCount()
{
clearTimeout(t)
}
</script>
</head>
<body>
<form>
<input type="button" value="开始计时！" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="停止计时！" onClick="stopCount()">
</form>
<p>
请点击上面的“开始计时”按钮。输入框会从 0 开始一直进行计时。点击“停止计时”可停止计时。
</p>
</body>
</html>
一、使用锚点链接
毫无疑问，使用锚点链接是一种简单的返回顶部的功能实现。该实现主要在页面顶部放置一个指定名称的锚点链接，然后我们在页面下方放置一个返回到该锚点的链接，用户点击该链接即可返回到该锚点所在的顶部位置。
示例代码如下：
<!-- 定义一个名称为top的锚点链接 --> <aname="top"></a> <!-- 这里是网页主体内容，此处省略 --> <!-- 返回页面顶部top锚点的链接 --> <ahref="#top">返回顶部</a>
值得注意的是，在现代浏览器中，如果浏览器找不到指定的锚点(例如top)，浏览器将会尝试跳转到id为top的HTML元素的起始位置。因此，我们也可以在头部放置一个id为top的HTML元素，遗憾的是，并不是所有的浏览器——尤其是某些浏览器的旧版本，都兼容这种行为。
二、使用js函数scrollTo()
当然，我们还可以利用JavaScript为我们提供的函数scrollTo(x, y)来实现返回到页面顶部的功能。scrollTo函数可以滚动到指定坐标(x, y)处的内容。我们将坐标设定为(0, 0)即可起到返回顶部的作用。
<ahref="javascript:scrollTo(0,0);">返回顶部</a>
三、使用js操作DOM样式
此外，我们还可以使用js将body或html等元素的scrollTop属性设置为0，即可滚动到页面的顶部。我们一般使用jQuery来实现上述代码。
// 以下三种方式均可实现返回页面顶部 $(window).scrollTop(0); $('body').scrollTop(0); $('html').scrollTop(0);
此外，我们还可以使用jQuery的动画效果函数animate()来实现平滑滚动到页面顶部的动画效果。
// 在500毫秒内平滑滚动到页面顶部 $('body').animate({scrollTop:0},500);