参考自一博客(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. CentOS中zip压缩和unzip解压缩命令详解

    以下命令均在/home目录下操作cd /home #进入/home目录1.把/home目录下面的mydata目录压缩为mydata.zipzip -r mydata.zip mydata #压缩myd ...

  2. Springboot读取自定义配置文件的几种方法

    一.读取核心配置文件 核心配置文件是指在resources根目录下的application.properties或application.yml配置文件,读取这两个配置文件的方法有两种,都比较简单. ...

  3. .NET-分页处理方式

    分页方案一: 现在常见的前端框架datatable,easyui等的分页插件,都是采用的前端分页,原理:先将符合条件的数据全部加载到页面上,然后计算分页,进行分页处理.(装载全部数据) 优点: --在 ...

  4. PHP文件操作[总结]

    1.前言 工作中涉及到数据处理,后台需要用到PHP处理数据,之前没有接触过PHP,借此机会了解了一下PHP,PHP很方便,很灵活,编码很舒服,很喜欢用PHP处理后台数据.今天总结一下php文件操作,主 ...

  5. DaoCloud加速docker镜像下载

    1. 注册DaoCloud用户; 2. 注册完成后,会进入dashboard页面,点击右上方的加速器.该页面提供了Linux.Windows和Mac的加速方案,我这里选择的是Linux: 3. 执行其 ...

  6. Softmax 函数的特点和作用是什么?

    作者:张欣链接:https://www.zhihu.com/question/23765351/answer/98897364来源:知乎著作权归作者所有,转载请联系作者获得授权. softmax 回归 ...

  7. Sqlite向MySql导入数据

    想把手上的Sqlite数据库导入到MySql,想来应该很简单,结果发现非常麻烦. 1.工具直接导入.试着找了几个软件,都不行.网上有人开发的,但是要收费,也不能用. 2.用各自支持的方式,中转.我用的 ...

  8. List,Set,Map存取元素各有什么特点

    一丶存放 List存放元素是有序,可重复 Set存放元素无序,不可重复 Map元素键值对形式存放,键无序不可重复,值可重复 二丶取出 List取出元素for循环,foreach循环,Iterator迭 ...

  9. 将java项目打包成docker镜像:镜像=副本

    简介:将jar打包成镜像好说,毕竟jar包长的都是一样的,但是我们只是写了一个普通的java项目,我也不方便封装成jar包什么的,但是我们也想打包docker image怎么办呢,我们可以用编译后的j ...

  10. 008-Go 关于字符串拼接

    如果是少量小文本拼接,用 “+” 如果是大量小文本拼接,用 strings.Join 如果是大量大文本拼接,用 bytes.Buffer package main import( "fmt& ...