参考自一博客(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 = true;
//Gets the height of the visible window
var clientHeight = document.documentElement.clientHeight;//Triggered when the scroll bar rolls
window.onscroll = function () {
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
if (osTop >= clientHeight) {
oscrollBtn.style.display = 'block';
} else {
oscrollBtn.style.display = 'none';
}
if (!isTop) {
clearInterval(timer);
}
isTop = false;
}
oscrollBtn.onclick = function () {
//Set timer
timer = setInterval(function () {
//Gets the height of the scroll bar
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
//The scroll bar slows down
var ispeed = Math.ceil(osTop / 6);
document.documentElement.scrollTop = document.body.scrollTop = osTop - ispeed;
isTop = true;
if (osTop == 0) {
clearInterval(timer);
}
}, 30); }
}

回到顶部bug的更多相关文章

  1. 通过js实现回到顶部功能

    许多商城网址,当我们滚动到一定高度时,我们会发现一般会出现一个回到顶部的js选项,点击轻松实现回到顶部,交互效果会显得比较人性化,且回到顶部过程中若在滚动滚动条时可以停止滚动,现在让我们来实现吧 我总 ...

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

    前言:今天想写个页面常用到的[点击回到页面顶部或是首页的功能],生活和职场一样,总会有低谷的时候,这个时候咱也别怂.别怂.别怂,说三遍!那都不是事,工作没了,再找呗,就像我上周五,团队解散那天,我是笑 ...

  3. iOS点击状态栏回到顶部底层实现原理

    在iOS开发中,苹果其实已经帮你实现了点击状态栏回到顶部这个功能,但我们在开发中会遇到点击不能回到顶部.其实这都和 ScrollView中的一个属性scrollsToTop有关,我们先看看苹果关于这个 ...

  4. 【JavaScript Demo】回到顶部功能实现

    随着网站的不断发展,需要展示的内容也越来越丰富,这导致网页上能展示的内容越来越多.当内容堆积影响了用户体验,就需考虑如何提升用户体验.在这一系列的改动中,“回到顶部”的功能成为了一个经典. 1.页面布 ...

  5. 浮动【电梯】或【回到顶部】小插件:iElevator.js

    iElevator.js 是一个jquery小插件,使用简单,兼容IE6,支持UMD和3种配置方式,比锚点更灵活. Default Options _defaults = { floors: null ...

  6. iOS tableView 滚动后回到顶部

    - (void)scrollViewDidScroll:(UIScrollView *)scrollView { CGPoint contentOffsetPoint = self.tableView ...

  7. 页面上常用的一些小功能--QQ、回到顶部

    1.QQ <script charset="utf-8" type="text/javascript" src="http://wpa.b.qq ...

  8. JS实现回到顶部效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 用Javascript实现回到顶部效果

    用Javascript实现回到顶部效果 经常看到网页中有回到顶部的效果,今天也研究一下回到顶部有哪些方法.众所周知,用锚链接是实现回到最简单的方法,但是从用户体验效果来说,并不是最好的.(锚链接回到顶 ...

随机推荐

  1. java正则校验,密码必须由字母和数字组成

    一个匹配数字和字母密码的正则表达式 2011 年 12 月 14 日 | Filed under: 正则表达式 and tagged with: 密码 , 正则表达式 , 零宽断言 一个用户注册功能的 ...

  2. DOM之通俗易懂讲解

    DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...

  3. IE11 F12工具报错

    系统环境 win7+IE11 报错描述: Exception in window.onload: Error: An error has ocurredJSPlugin.3005 Stack Trac ...

  4. python实现itemCF and userCF

    http://my.oschina.net/zhangjiawen/blog/185625 1基于用户的协同过滤算法: 基于用户的协同过滤算法是推荐系统中最古老的的算法,可以说是这个算法的诞生标志了推 ...

  5. 基于浏览器的开源“管理+开发”工具,Pivotal MySQL*Web正式上线!

    基于浏览器的开源“管理+开发”工具,Pivotal MySQL*Web正式上线! https://www.sohu.com/a/168292858_747818 https://github.com/ ...

  6. 转:在centos7上安装memcache

    转:https://www.liquidweb.com/kb/how-to-install-memcached-on-centos-7/ http://devdocs.magento.com/guid ...

  7. 让你的Python代码更加pythonic

    http://wuzhiwei.net/be_pythonic/ 何为pythonic? pythonic如果翻译成中文的话就是很python.很+名词结构的用法在中国不少,比如:很娘,很国足,很CC ...

  8. OpenGL ES 3.0 and libGLESv2

    note that libGLESv2 is the recommended Khronos naming convention for the OpenGL ES 3.0 library. This ...

  9. easyui form load 数据表单有下拉框

    (function () { $('#text1').combobox({ url: 'http://localhost:5463/test/getComboJson' }) $('#text2'). ...

  10. 被查封7周之后,全球最大BT网站“海盗湾”又重新活过来了【36kr】

    原文地址 原文地址 "免费"和"版权","自由"和"监管"永远在较量啊,矛盾共同体,事物的两面性~ 被查封7周之后,全球 ...