回到顶部bug
参考自一博客(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的更多相关文章
- 通过js实现回到顶部功能
许多商城网址,当我们滚动到一定高度时,我们会发现一般会出现一个回到顶部的js选项,点击轻松实现回到顶部,交互效果会显得比较人性化,且回到顶部过程中若在滚动滚动条时可以停止滚动,现在让我们来实现吧 我总 ...
- 【JQ+锚标记实现点击页面回到顶部】
前言:今天想写个页面常用到的[点击回到页面顶部或是首页的功能],生活和职场一样,总会有低谷的时候,这个时候咱也别怂.别怂.别怂,说三遍!那都不是事,工作没了,再找呗,就像我上周五,团队解散那天,我是笑 ...
- iOS点击状态栏回到顶部底层实现原理
在iOS开发中,苹果其实已经帮你实现了点击状态栏回到顶部这个功能,但我们在开发中会遇到点击不能回到顶部.其实这都和 ScrollView中的一个属性scrollsToTop有关,我们先看看苹果关于这个 ...
- 【JavaScript Demo】回到顶部功能实现
随着网站的不断发展,需要展示的内容也越来越丰富,这导致网页上能展示的内容越来越多.当内容堆积影响了用户体验,就需考虑如何提升用户体验.在这一系列的改动中,“回到顶部”的功能成为了一个经典. 1.页面布 ...
- 浮动【电梯】或【回到顶部】小插件:iElevator.js
iElevator.js 是一个jquery小插件,使用简单,兼容IE6,支持UMD和3种配置方式,比锚点更灵活. Default Options _defaults = { floors: null ...
- iOS tableView 滚动后回到顶部
- (void)scrollViewDidScroll:(UIScrollView *)scrollView { CGPoint contentOffsetPoint = self.tableView ...
- 页面上常用的一些小功能--QQ、回到顶部
1.QQ <script charset="utf-8" type="text/javascript" src="http://wpa.b.qq ...
- JS实现回到顶部效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 用Javascript实现回到顶部效果
用Javascript实现回到顶部效果 经常看到网页中有回到顶部的效果,今天也研究一下回到顶部有哪些方法.众所周知,用锚链接是实现回到最简单的方法,但是从用户体验效果来说,并不是最好的.(锚链接回到顶 ...
随机推荐
- C# 网络编程之webBrowser获取网页url和下载网页中图片
该文章主要是通过C#网络编程的webBrowser获取网页中的url并简单的尝试瞎子啊网页中的图片,主要是为以后网络开发的基础学习.其中主要的通过应用程序结合网页知识.正则表达式实现浏览.获取url. ...
- 【ElasticSearch】ES5新特性-keyword-text类型-查询区别
ES5新特性-keyword-text类型-查询区别 elasticsearch-head Elasticsearch-sql client junneyang (JunneYang) es keyw ...
- Kafka:ZK+Kafka+Spark Streaming集群环境搭建(三)安装spark2.2.1
如何搭建配置centos虚拟机请参考<Kafka:ZK+Kafka+Spark Streaming集群环境搭建(一)VMW安装四台CentOS,并实现本机与它们能交互,虚拟机内部实现可以上网.& ...
- 转:ffmpeg time_base详解
ffmpeg time_base详解 https://my.oschina.net/u/3054677/blog/866368
- 数据科学家Docker历险记(1):windows下环境搭建
原文:http://www.xueqing.tv/cms/article/247 Docker是最近炒得很火热的一门技术,在网上可以找到关于它的介绍文章,比如<Docker到底是什么?为什么它这 ...
- 为什么有的需要安全连接的的application只有开Fiddler才好用?
Help! Running Fiddler Fixes My App??? Over the years, the most interesting class of support reques ...
- go-ethereum
如果要深入了解go-ethereum项目的实现与机制,看源代码是必不可少的.今天这篇博客就简单介绍一下如何在本地搭建项目的开发环境. GO语言环境搭建 以win8为例,访问地址https://gola ...
- oauth2-server-php-docs 食谱
一步一步的演练 以下说明提供详细的演练,以帮助您启动并运行OAuth2服务器.要查看实现此库的现有OAuth2服务器的代码库,请查看OAuth2 Demo. 初始化您的项目 为您的项目创建一个目录,并 ...
- Android 获得图片并解码成缩略图以减少内存消耗
本文内容 环境 演示 下载 Demo 环境 Windows 2008 R2 64 位 Eclipse ADT V22.6.2,Android 4.4.3 SAMSUNG GT-I9008L,Andro ...
- CentOS7安装Docker与使用篇
一.在CentOS7上安装Docker篇 1. 查看系统版本: $ cat /etc/redhat-release CentOS Linux release 7.0.1406 (Core) 2. 安装 ...