参考自一博客(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. 荔枝FM 字体文件 IconFontTextView

    使用效果 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android ...

  2. Matplotlib.pyplot 常用方法

    1.介绍 Matplotlib 是一个 Python 的 2D绘图库,它以各种硬拷贝格式和跨平台的交互式环境生成出版质量级别的图形.通过 Matplotlib,开发者可以仅需要几行代码,便可以生成绘图 ...

  3. mahout0.7 示例运行纪实

    http://1992mrwang.blog.51cto.com/3265935/1205282 运行太不容易了 所以要记下来以免后面忘记了 首先是数据 vim testdata.txt 第一列为Us ...

  4. [转]nodejs深入学(7)理解Buffer

    原文: https://www.jianshu.com/p/e3f14cdf78f1 --------------------------------------------------------- ...

  5. ubuntu16.04与mysql的运维注意事项

    1:环境 ubuntu16.04 虚拟机,需要搭建一个MySQL的生产或者测试环境 2:操作步骤 2.1:更新系统源 首次给root用户指定密码  ,先用安装用户登录 sudo  apt-get up ...

  6. (转)Unity3d中的碰撞检测

    很多时候,当我们的主角与其他GameObject发生碰撞时, 我们需要做一些特殊的事情,比如:子弹击中敌人,敌人就得执行一系列的动作.这时,我们就需要检测到碰撞现象,即碰撞检测.这一篇,我来具体谈谈自 ...

  7. [Algorithm] Circular buffer

    You run an e-commerce website and want to record the last N order ids in a log. Implement a data str ...

  8. Masonry应用【美图秀秀首页界面自动布局】

    Masonry在此实现时候,并没有比NSLayoutConstraint简单,相反我觉得还不如NSLayoutConstraint. [self.topView mas_makeConstraints ...

  9. [Canvas]奔跑的马

    下载地址:https://files.cnblogs.com/files/xiandedanteng/52-WalkingHorse.rar,请用Chrome浏览器打开观看动态效果. 图例: 源码: ...

  10. hadoop环境搭建与測试

    搭建參看: http://blog.csdn.net/w13770269691/article/details/16883663/ 查看集群状态: [root@master bin]# hdfs df ...