zoukankan      html  css  js  c++  java
  • js回到顶部

    1,使用瞄标记

    使用HTML锚标记最简单,就是看起来有点不好看,点击后会在地址栏显示这个锚标记,其它的倒没什么。

    页面顶部放置:

    <a name="top" id="top"></a>

    放置位置在<body>标签之后随便找个地方放都可以,只要靠近顶部即可。

    页面底部放置:

    <a href="#top" target="_self">返回顶部</a>

    使用

    window.scrollTo(x,y) 绝对定位

    window.scrollBy(dx,dy)相对定位

    scrollTo(0,0)到最顶部

    渐进式返回顶部,要好看一些

    function pageScroll(){
         if(window.pageYOffset==0)
         {
            clearTimeout(window.scrolldelay);
             
             alert(window.scrolldelay);
            
         }
        window.scrollBy(0,-10);
        window.scrolldelay=setTimeout('pageScroll()',100);
        
    }

    <a href="#" onclick="pageScroll(); return false;">回到顶部3</a>

    回到顶部后,我们发现往下滚动时,页面自动向上滚动,说明我们的pageScroll函数并没有清除定时器。为什么

    因为函数前面清除定时器后没有return;后面的setTimeout又执行了。

    加上return 或者把 if语句放在函数的后面就可以了。

    clearTimeout()清除上个setTimeout的句柄。

    window.clearTimeout(setTimeout("0")-1);

    ,setTimeout返回的值似乎没什么规律,但紧挨着的两个setTimeout()方法返回值却是有关系的,即相差1,所以 
    clearTimeout(setTimeout("0")-1)起作用。 
    当然clearTimeout(setTimeout("")-1)一样起作用。

     

    获取页面滚动的位置:

    function getScrollingPosition()
    {
        var position=[0,0];
        if(window.pageYOffset)
        {
            position=[
                window.pageXOffset,
                window.pageYOffset
                ];
        }
        else if(document.documentElement.scrollTop&&document.documentElement.scrollLeft!=0)
        {
            position=[
                document.documentElement.scrollLeft,
                document.documentElement.scrollTop
                ];
        }
        else if(document.body.scrollTop) //基本上已被淘汰
        {
            position=[
                document.body.scrollLeft,
                document.body.scrollTop
                ];
        }
        return position;
    }
    window.onscroll=function()
    {
        var scrollpos=getScrollingPosition();
        document.title=scrollpos[1];
    
    }

    获取页面滚动的位置一般用window.pageXOffset,有些浏览器用的是document.documentElement.scrollLeft,但是chrome的这个参数值恒为0.

    返回顶部功能做成了滑动效果。后来为了更贴合物理特征, 改造做成了减速的滑动效果。

    首先说一下原理吧,我们会获取滚动条到页面顶部的距离,然后上移一定的距离;再获取滚动条到页面顶部的距离,上移一定的距离(比上一次小一点);以此类推 ...

    /**
     * 回到页面顶部
     * @param acceleration 加速度
     * @param time 时间间隔 (毫秒)
     **/
    function goTop(acceleration, time) {
            acceleration = acceleration || 0.1;
            time = time || 16;
            var position=getScrollingPosition();
            var x,y;
            x=position[0];
            y=position[1];
          
     
            // 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小
            var speed = 1 + acceleration;
            window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));
     
            // 如果距离不为零, 继续调用迭代本函数
            if(x > 0 || y > 0) {
                    var invokeFunction = "goTop(" + acceleration + ", " + time + ")";
                    window.setTimeout(invokeFunction, time);
            }
    } 
    关于除法
    
    如果结果太大或太小,结果就是Infinity 或 -Infinity
    
    如果某个运算数为NaN,结果就是NaN
    
    0除一个非无穷大的数字,结果为NaN.


  • 相关阅读:
    使用cookie来做身份认证
    讲一下Asp.net core MVC2.1 里面的 ApiControllerAttribute
    不要使用Resource Owner Password Credentials
    nginx部署dotnet core站点
    这可能是最low的发布dotnet core站点到centos7教程
    记一个常见的ms sql server中取第N条记录的方法
    MVC基本开发介绍 (1)列表展示
    WCF 入门(29)
    WCF 入门(25,26,27,28)
    使用 Visual Studio Code 搭建 C/C++ 开发和调试环境
  • 原文地址:https://www.cnblogs.com/youxin/p/2686866.html
Copyright © 2011-2022 走看看