页面回到顶部

js代码：

function pageScroll(){
//把内容滚动指定的像素数（第一个参数是向右滚动的像素数，第二个参数是向下滚动的像素数）
window.scrollBy(0,-100);
//延时递归调用，模拟滚动向上效果
scrolldelay = setTimeout(‘pageScroll()‘,100);
//获取scrollTop值，声明了DTD的标准网页取document.documentElement.scrollTop，否则取document.body.scrollTop；因为二者只有一个会生效，另一个就恒为0，所以取和值可以得到网页的真正的scrollTop值
var sTop=document.documentElement.scrollTop+document.body.scrollTop;
//判断当页面到达顶部，取消延时代码（否则页面滚动到顶部会无法再向下正常浏览页面）
if(sTop==0) clearTimeout(scrolldelay);
}

html代码：

<a onclick="pageScroll()">返回顶部</a>
时间： 2024-10-03 21:33:04

页面回到顶部的相关文章

js——页面回到顶部

很久都没有去慕课网学习学习了,刚恰好就看见了一个用的比较多的小例子——页面回到顶部,记得之前自己也是在初学web时,被这个坑了一回,因此今天特地拿来分享分享…… <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面回到顶部</title> <link rel="stylesheet&quo

【JQ+锚标记实现点击页面回到顶部】

前言:今天想写个页面常用到的[点击回到页面顶部或是首页的功能],生活和职场一样,总会有低谷的时候,这个时候咱也别怂.别怂.别怂,说三遍!那都不是事,工作没了,再找呗,就像我上周五,团队解散那天,我是笑着走的,还给小白挥了挥手,微笑一个.那句话叫什么来着,佛祖虽给你关了一扇门,说不定会再给你开一扇窗.明天我就换工作了,我感谢我的同学. a)下面看看实现,实现很简单,通过JQ判断滚动条向下滚动的长度大于多少时显示[回到顶部+回到首页]的图标(换一种理解:滚动条顶端距离页面顶部的距离),另外一种实现方

页面回到顶部的实现及原理

转自:http://www.mojidong.com/html/css/js/2013/03/03/page-top-to-achieve/ 现在很多网页都有一个回到顶部的功能,当你拖动滚动条往下拉到一定程度就会在右下方显示一个回到顶部的按钮,点击则可以立即回到页面顶部,非常贴心的设计. 今天打算自己做一个,分析了一下,要点如下 监听当前页面滚动事件 当滚动到一定像素显示回到顶部的按钮 给回到顶部按钮绑定点击事件,点击按钮让滚动条回到顶部并隐藏按钮 核心点主要在js控制按钮的显示和隐藏及点击按钮

jQuery-使页面回到顶部

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 6 <title>back-top</title> 7 <style type=&qu

使用 jQuery 页面回到顶部

function backTop() { $(window).scroll(function () { if ($(window).scrollTop() > 100) { $("#topImg").fadeIn(1000); } else { $("#topImg").fadeOut(1000); } }); //当点击跳转链接后,回到页面顶部位置 $("#topImg").click(function () { //考虑到兼容性使用 b

JS实现页面回到顶部效果

[代码] 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>home</title> 6 </head> 7 <style> 8 *{ 9 padding:0; 10 margin:0; 11 } 12 .box{ 13 width:1190px; /*只有设置了

页面回到顶部的三种实现(锚标记，js)

本文不再介绍,大家根据自己需要选择其中的一种即可,总之简约最美的,能减少代码就减少代码,能不调用的就别调用,要不是天缘博客的文章都是牛长也不会添加这个功能. 本文介绍三款简单的返回页面顶部代码,可以使用简单的HTML(http://www.jb51.net/web/62651.html) 锚标记,也可使用Javascript Scroll (http://www.jb51.net/article/31422.htm) 函数动态返回,其它的还有悬浮脚本等有点复杂了,本文不再介绍,大家根据自己需要选

回到顶部效果

<style> .box { width: 1190px; margin: 0 auto; } #btn { width: 40px; height: 40px; background: url(images.png) no-repeat left top;//回到顶部的小箭头 position: fixed; left: 50%; margin-left: 600px; bottom: 30px; display: none; } #btn:hover { background: url(i

回到顶部bug

参考自一博客(https://www.cnblogs.com/abao0/p/6642288.html)内有慕课网教程(后发现有bug, 弃置不用了) 以下有问题, 当滚动条处于顶部时, 刷新页面, 回到顶部icon依然会出现. //Page loading trigger window.onload = function () { var oscrollBtn = document.getElementById('scrollBtn'); var timer = null; var isTop