参考自一博客(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. 读书笔记,《Java8实战》第一章,为什么要关心 Java8

       开篇作者就提出,Java8所做的改变在许多方面比java历史上任何一次改变都深远.而且好消息是,这些改变会让你编辑程序来更容易,再也不用写类似类似于以前的swing中的事件处理函数的啰嗦代码了. ...

  2. .Net(c#)打印--多页打印

    如果要实现多页打印,就要使用PrintPageEventArgs类的HasMorePages属性. 我们对之前的代码作如下变更:      增加PrintDocument的BeginPrint和End ...

  3. iOS开发-UINavigationBar和Status Bar实用技巧

    iOS7之后关于UINavigationBar和Status  Bar都发生了一系列的改变,如果不需要兼容iOS7之后的设备,按照网上有些资料去解决问题会踩到一些坑.在iOS 7中,我们可以修改每个V ...

  4. RxJava RxBinding RxView 控件事件 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  5. Hadoop概念学习系列之Hadoop、Spark学习路线(很值得推荐)

    说在前面的话 此笔,对于仅对于Hadoop和Spark初中学者.高手请忽略! 1 Java基础: 视频方面:          推荐<毕向东JAVA基础视频教程>.学习hadoop不需要过 ...

  6. Backbone.js 中使用 Model

    前面几篇 Backbone.js 的例子中有使用到 template, 及数据的填充,其实这已经很接近 Model 了.现在来学习怎么创建自己的 Model 类,并简单的使用.Backbone.js ...

  7. 使用Java开发微信公众平台(二)——消息的接收与响应

    上一篇文章(http://www.jerehedu.com/fenxiang/171807_for_detail.htm )中,我们学习了使用Java语言开发微信公众平台的第一部分——环境搭建与开发接 ...

  8. 【google面试题】求1到n的正数中1出现的次数的两种思路及其复杂度分析

    问题描写叙述: 输入一个整数n,求从1到n这n个整数的十进制表示中1出现的次数.比如输入12,从1到12这些整数中包括1 的数字有1.10.11和12.1一共出现了5次. 这是一道广为流传的googl ...

  9. 如何导入另一个 Git库到现有的Git库并保留提交记录

    问题描述: 我在本地有两个Git库项目(D1=PC项目 包含通用项目,D2=移动项目 也包含通用项目这两个项目在同一目录下),因为这两个项目使用的通用项目是一样的如数据库访问等   只有显示层(vie ...

  10. python性能还是不错的

    一个未优化的程序,跑了四天,字典长度有15万条,每条40个字段,跑得还算不错. 刚刚优化后的: 等运行两天后再看看效果...