回到顶部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;
    //Eliminate the problem of returning the top icon when it is at the top
    var osTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (osTop >= clientHeight) {
            oscrollBtn.style.display = ‘block‘;
        } else {
            oscrollBtn.style.display = ‘none‘;
    }
    //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);

    }
}

原文地址:https://www.cnblogs.com/yadongliang/p/9313583.html

时间: 2024-11-02 01:46:36

回到顶部bug的相关文章

jquery回到顶部源码分享-

// JavaScript Document (function($){ var goToTopTime; $.fn.goToTop=function(options){ var opts = $.extend({},$.fn.goToTop.def,options); var $window=$(window); $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body'))

JQuery实现回到顶部

当一个页面的内容比较长时,一般都在页面的右下角的固定位置有个"回到顶部"的按钮,点击后,页面的滚动条逐渐回滚到顶部,本篇来描述一个它的实现过程. 首先,需要有一个按钮 <button id="btn_top" title="回到顶部"> 回到顶部 </button> 然后给这个元素定位到右下角,我们使用position:fixed.下面这个按钮加一些最基本的样式 #btn_top { position: fixed; bo

Angular回到顶部按钮指令

之前的分页代码指令化在线下测试没有问题,到服务器上就不运行了,所以那个先放一放. 今天来把"回到顶部"按钮指令化.首先是页面html: <!--回弹按钮--> <back-button></back-button> 指令的单词在html中使用横杠分隔,而在js代码中使用驼峰法,没毛病,简单不解释: /* 回弹按钮指令 * */ app.directive('backButton', function() { return { restrict: 'E

html css jquery 回到顶部按钮

今天做了个回到顶部的功能,在这里记录一下,有需要可以拿去试试! CSS部分,很简单就一个class /*回到顶部*/ .back-top { position: fixed; right: 15px; bottom: 15px; z-index: 9999; font-size: 25px; width: 40px; height: 40px; background-color: #adadad; color: #ffffff; cursor: pointer; border-radius: 2

转:5种回到顶部的写法从实现到增强

http://www.cnblogs.com/xiaohuochai/p/5836179.html 前面的话 本文先详细介绍回到顶部的5种写法,然后对其实现功能增加,最后得到最终实现 写法 [1]锚点 使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [注意]关于锚点的详细信息移步至此 <body style="height:2000px;">

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

iElevator.js 是一个jquery小插件,使用简单,兼容IE6,支持UMD和3种配置方式,比锚点更灵活. Default Options _defaults = { floors: null, btns: null, backtop: null, selected: '', sticky: -1, visible: { isHide: 'no', numShow: 0 }, speed: 400, show: function(me) { me.element.show(); }, h

关于“回到顶部”的一些笔记

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>回到顶部</title> <style>.bg{ width: 1190px; margin: 0 auto;}#btn{ width: 40px; height: 40px; position: fixed; right: 65px; bottom

octopress添加回到顶部按钮

准备回到顶部的png图片一枚,可以随自己喜好google.分享我的 取名top.png,保存在octopress/source/images/top.png octopress/source/_includes/custom/目录下新建网页文件:totop.html <!--返回顶部开始--> <div id="full" style="width:0px; height:0px; position:fixed; right:80px; bottom:80p

回到顶部 jquery

//回到顶部 $(function() { $.fn.backToTop = function(options) { var defaults = { showHeight : 120, speed : 100 }; var options = $.extend(defaults, options); $("#footer").append("<div id='totop' style='cursor:pointer;position:fixed;bottom:20px