zoukankan      html  css  js  c++  java
  • js回到顶部动画效果实现方法

    达到回到顶部效果主要原理就是修改滚动条距离顶部的位置为零,滚动条距离顶部的位置介绍:

      获取当前页面滚动条纵坐标的位置:document.body.scrollTop与document.documentElement.scrollTop

    并且,document.body.scrollTop与document.documentElement.scrollTop两者有个特点,就是同时只会有一个值生效。比如document.body.scrollTop能取到值的时候,document.documentElement.scrollTop就会始终为0;反之亦然。

    接下来介绍三种回到顶部的实现:

    1、无动画效果:

    document.body.scrollTop = document.documentElement.scrollTop = 0;

    很简单,直接改变滚动条顶部距离为0达到目的。

    2、有简单的动画效果:

    $("html,body").animate({scrollTop:0},500);

    在一段时间之内改变顶部的距离,也可以支持一些简单的动画效果(速度函数)

    3、由快到慢动画效果,体验较好:

    scrollToptimer = setInterval(function () {
        console.log("定时循环回到顶部")
        var top = document.body.scrollTop || document.documentElement.scrollTop;
        var speed = top / 4;
        if (document.body.scrollTop!=0) {
            document.body.scrollTop -= speed;
        }else {
            document.documentElement.scrollTop -= speed;
        }
        if (top == 0) {
            clearInterval(scrollToptimer);
        }
    }, 30); 

    大致原理:因为减过之后的scrollTop越来越少,减的值越来越少,给人一种由快到慢的感觉。因为document.body.scrollTop与document.documentElement.scrollTop只会有一个有值,所以需要判断一下,最后回到顶部后,清除掉定时器。speed可以设置大小,除数越大speed值越小,动画效果越慢。其中top的值也可以这么取:

    var top=document.body.scrollTop + document.documentElement.scrollTop;

    来源:

    1.document.body.scrollTop与document.documentElement.scrollTop相关:点我跳转

    2.animate资料:点我跳转

    3.第三种动画效果的出处:点我跳转

  • 相关阅读:
    加法的位运算实现
    C++装饰器模式
    字符串类型的相互转换
    手算CRC及其实现
    Linux下搭建C/C++编程环境
    Deepin Linux 实体机安装
    Atom + Texlive 配置 Latex 环境
    有关字符串的算法(KMP,Manacher,BM)陆续补充
    Linux 下大文件分割与合并
    Ubuntu /目录满,发现是docker image 太多解决办法
  • 原文地址:https://www.cnblogs.com/li-you/p/7275239.html
Copyright © 2011-2022 走看看