回到顶部效果_学习笔记

首页免费课回到顶部效果笔记

回到顶部效果

最热最新

iluyao

为什么改成负的就能滚到头？回答这个问题前，先来看下为什么不改成负数就不行呢？注意这句：var ispeed = Math.floor(osTop / 6); 当上面osTop的值小于6这个除数时，ispeed的值始终等于0（向下取整了），所以问题来了，当ispeed的值不变时，osTop - ispeed 这个控制滚动条的值也就不变了，所以滚动条永远到不了顶。实际中，当osTop = 5 时，ispeed 为 0，下面两句也始终为5： document.documentElement.scrollTop = osTop - ispeed; // 兼容IE document.body.scrollTop = osTop - ispeed; // 兼容FF、Chrome 所以滚动条一直停在距离顶部5px的地方。 OK，那为什么改成负数就行了呢？其实改负数的目的就是让ispeed的值不为0. 实际中，当osTop = 5（或小于5时），Math.floor(osTop / 6) 的值为 -1，这样就使得 osTop + ispeed 的值始终能减小下去，直至到0. 这种用负数的方法不好理解，我是采用Math.ceil()这个方法（向上取整）实现的，代码如下： obtn.onclick = function(){ // 定时器开启 timer = setInterval(function(){ // 获取当前滚动条距离顶部距离 var osTop = document.documentElement.scrollTop || document.body.scrollTop; var ispeed = Math.ceil(osTop / 6); document.documentElement.scrollTop = osTop - ispeed; document.body.scrollTop = osTop - ispeed; if(osTop == 0){ clearInterval(timer); } },30); }

查看全部

8 采集收起来源：用JavaScript实现回到顶部效果
2015-07-27
闹小志

照着老师的改写了一个jQuery的版本： $(function(){ var timer=null; var isTop=true; var clientHeight=$(document).height(); $(window).scroll(function(){ var osTop=$(document).scrollTop(); if(osTop>=clientHeight){ $("#a1").css("display","inline-block"); }else{

查看全部

5 采集收起来源：用JavaScript实现“按钮”的显示与隐藏
2018-03-22
夏rain天 02:10

看是否绑定好的一种方法：审查元素→Event Listeners→click

查看全部

3 采集收起来源：用JavaScript实现回到顶部效果
2018-03-22
Hakuna_Matata

终于搞定了，改了好几遍 ~~~~~~~~

查看全部

2 采集收起来源：编程练习
2015-07-01
Heson 13:18

console.log();浏览器后台打印执行日志

查看全部

2 采集收起来源：用JavaScript实现回到顶部效果
2014-10-30
Lyong

window.onload=function(){ var obtn = document.getElementById("btn"); var timer = null; var isTop = true; window.onscroll = function(){ if(!isTop){ clearInterval(timer); } isTop = false; } obtn.onclick=function(){ timer = setInterval(function(){ var osTop= document.documentElement.scrollTop || document.body.scrollTop; var speed =Math.ceil(osTop/5); document.documentElement.scrollTop = document.body.scrollTop = osTop-speed; isTop = true; if(osTop == 0){ clearInterval(timer); } },30); }; };

查看全部

2 采集收起来源：用JavaScript实现回到顶部效果
2018-03-22
Moirai

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 兼容不同浏览器

查看全部

2 采集收起来源：用JavaScript实现回到顶部效果
2018-03-22
only丶浅若

#btn:hover{background-position:0 -40px;}这个也可以

查看全部

2 采集收起来源：用HTML CSS实现页面布局
2015-03-24
only丶浅若

获取浏览器可视区高度：var 变量=document.documentElement.clientHeight

查看全部

2 采集收起来源：用JavaScript实现“按钮”的显示与隐藏
2015-02-26
menghuanbaolei

锚链接： <a href="#">默认回到顶部

查看全部

2 采集收起来源：案例效果展示及锚链接
2018-03-22
IMGUOC

我发现一个Bug 当连续点击返回顶部时，滚动条就拉不下来了。所以我改动代码如下： window.onload = function() { var topBtn = document.getElementById("topBtn"); var timer = null; var isTop = true; var flag = true; topBtn.addEventListener("click", function() { if (!flag) return; timer = setInterval(backToTop, 30); flag = false; }); function backToTop() { var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var speed = Math.ceil(scrollTop / 7); document.documentElement.scrollTop = document.body.scrollTop = scrollTop - speed; isTop = true; if (scrollTop == 0) { clearInterval(timer); flag = true; } } window.addEventListener("scroll", function() { if (!isTop) { clearInterval(timer); flag = true; } isTop = false; }); }

查看全部

2 采集收起来源：用JavaScript实现回到顶部效果
2018-03-22
霜花似雪

为什么改成负的就能滚到头？回答这个问题前，先来看下为什么不改成负数就不行呢？注意这句：var ispeed = Math.floor(osTop / 6); 当上面osTop的值小于6这个除数时，ispeed的值始终等于0（向下取整了），所以问题来了，当ispeed的值不变时，osTop - ispeed 这个控制滚动条的值也就不变了，所以滚动条永远到不了顶。实际中，当osTop = 5 时，ispeed 为 0，下面两句也始终为5： document.documentElement.scrollTop = osTop - ispeed; // 兼容IE document.body.scrollTop = osTop - ispeed; // 兼容FF、Chrome 所以滚动条一直停在距离顶部5px的地方。 OK，那为什么改成负数就行了呢？其实改负数的目的就是让ispeed的值不为0. 实际中，当osTop = 5（或小于5时），Math.floor(osTop / 6) 的值为 -1，这样就使得 osTop + ispeed 的值始终能减小下去，直至到0. 这种用负数的方法不好理解，我是采用Math.ceil()这个方法（向上取整）实现的，代码如下： obtn.onclick = function(){ // 定时器开启 timer = setInterval(function(){ // 获取当前滚动条距离顶部距离 var osTop = document.documentElement.scrollTop || document.body.scrollTop; var ispeed = Math.ceil(osTop / 6); document.documentElement.scrollTop = osTop - ispeed; document.body.scrollTop = osTop - ispeed; if(osTop == 0){ clearInterval(timer); } },30); }

查看全部

2 采集收起来源：用JavaScript实现回到顶部效果
2016-06-05
静初

window.onload=function(){ //页面加载完毕的时候触发 }

查看全部

1 采集收起来源：用JavaScript实现回到顶部效果
2016-04-09
有一种成熟叫认怂

document.documentElement.clientHeight || document.body.clientHeight;//可视宽高 document.documentElement.scrollTop || document.body.scrollTop;//滚动条和顶部距离 window.onscroll ;//滚动条滚动时触发 //以下为关键代码 //如下可使滚动条减速停止 timer = setInterval(function(){ var disTop=document.documentElement.scrollTop || document.body.scrollTop; var mySpeed=disTop/5; noStop = true; document.documentElement.scrollTop = document.body.scrollTop = disTop-mySpeed; if(disTop<=0){ clearInterval(timer); } },30); //如下代码可使滚动条在滚动时被迫停止 window.onscroll = function(){ //这一部分是显示和隐藏回顶部按钮的 var scrDis = document.documentElement.scrollTop || document.body.scrollTop; if(scrDis>=clientHeight){ btn.style.display = 'block'; }else{ btn.style.display = 'none'; } //为什么如下设置就能人为终止滚动条计时器？？？？？？？？？？？？？？ if(!noStop){ clearInterval(timer); } noStop = false; };

查看全部

1 采集收起来源：编程练习
2018-03-22
刁民Coder

window.onscroll=function() {}//当滚动条发生滚动时触发。 IE识别document.documentElement.scrollTop 谷歌识别document.body.scrollTop 各浏览器兼容写法var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;

查看全部

1 采集收起来源：用JavaScript实现回到顶部效果
2016-01-04