精华内容
下载资源
问答
  • 回到顶部效果
    千次阅读
    2018-09-13 10:20:05

    功能:

    1. 滚动到第二屏才出现“返回顶部”按钮;
    2. 点击“返回顶部”按钮会返回顶部,而且速度越来越慢;
    3. 在返回顶部的途中如果用鼠标滚一下滚轮会停止返回顶部的滚动。
    <script>
            window.onload = function() {
                获取回到顶部的按钮
                var btn = document.getElementById('btn');
                var timer = null;
    
                // 标识是否清除定时器,为了实现在回到顶部的过程中通过滚动一下鼠标实现清除定时器从而达到滚动的目的
                var isTop = true;
    
                // 获取页面可视区高度,从而判断返回顶部按钮是否出现
                var cHeight = document.documentElement.clientHeight;
    
                window.onscroll = function() {
                    // 让返回顶部按钮在第二屏才开始出现
                    var osTop = document.documentElement.scrollTop || document.body.scrollTop;
                    if (osTop >= cHeight) {
                        btn.style.display = 'block';
                    } else {
                        btn.style.display = 'none';
                    }
    
                    if (!isTop) {
                        clearInterval(timer);
                    }
                    isTop = false;
                }
    
                btn.onclick = function() {
                    // 设置定时器
                    timer = setInterval(function() {
                        // 获取滚动条距离顶部的高度
                        var osTop = document.documentElement.scrollTop || document.body.scrollTop;
                        // 越滚越慢,设置成负数是为了防止减不到0
                        var ispeed = Math.floor(-osTop / 6);
                        document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
    
                        isTop = true; // 这里记得设置,不然滚一次就停止了
    
                        if (osTop == 0) {
                            clearInterval(timer);
                        }
                    }, 30);
                };
            }
        </script>

     

    更多相关内容
  • 在IOS开发过程中,经常会有这种需求,需要通过点击状态栏返回到顶部,给用户更好的体验效果,下面这篇文章给大家详细介绍了实现过程,有需要的可以参考借鉴。
  • 本文实例为大家分享了JS实现带动画的回到顶部效果的具体代码,供大家参考,具体内容如下 实现功能:滚动到页面某一个高度的时候,回到顶部按钮出现。点击之后回到网页顶部,按钮隐藏。 代码如下,jQuery引用的是...
  • 本篇文章主要是对javascript 回到顶部效果的实现代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
  • 本文实例讲述了JS采用绝对定位实现回到顶部效果。分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
  • jQuery可爱火箭回到顶部效果代码,当滑动网页到下面的时候,会出现小火箭,到顶部,小火箭消失,点击小火箭有个返回顶部的效果,一般我们在商城网站或者企业网站中经常用到这样的效果,php中文网推荐下载!
  • 本例将实现这样的一个效果:下拉到一定距离后按钮才显示出来,鼠标放到按钮上时,按钮背景会变成灰色,并且图标变成了文字。点击按钮缓慢回到顶部
  • 该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置。 <body style="height:2000px;"> <div id="topAnchor">...

    1.锚点:

    使用锚点链接是一种简单的返回顶部的功能实现。该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置。

    <body style="height:2000px;">
        <div id="topAnchor"></div>
        <a href="#topAnchor" style="position:fixed;right:0;bottom:0">回到顶部</a>
    </body>
    

    2.scrollTop

    scrollTop属性表示被隐藏在内容区域上方的像素数。元素未滚动时,scrollTop的值为0,如果元素被垂直滚动了,scrollTop的值大于0,且表示元素上方不可见内容的像素宽度。

    由于scrollTop是可写的,可以利用scrollTop来实现回到顶部的功能。另外注意关于页面的scrollTop的兼容问题。

    <body style="height:2000px;">
        <button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button>
        <script>
            test.onclick = function(){
                document.body.scrollTop = document.documentElement.scrollTop = 0;
            }
        </script>
    </body>
    

    3.scrollTo()

    scrollTo(x,y)方法滚动当前window中显示的文档,让文档中由坐标x和y指定的点位于显示区域的左上角。设置scrollTo(0,0)可以实现回到顶部的效果。

    <body style="height:2000px;">
        <button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button>
        <script>
            test.onclick = function(){
                scrollTo(0,0);
            }
        </script>
    </body>
    

    4.scrollBy()

    scrollBy(x,y)方法滚动当前window中显示的文档,x和y指定滚动的相对量。

    只要把当前页面的滚动长度作为参数,逆向滚动,则可以实现回到顶部的效果。

    <body style="height:2000px;">
        <button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button>
        <script>
            test.onclick = function(){
                var top = document.body.scrollTop || document.documentElement.scrollTop
                scrollBy(0,-top);
            }
        </script>
    </body>
    

    5.scrollIntoView()

    Element.scrollIntoView方法滚动当前元素,进入浏览器的可见区域

    该方法可以接受一个布尔值作为参数。如果为true,表示元素的顶部与当前区域的可见部分的顶部对齐(前提是当前区域可滚动);如果为false,表示元素的底部与当前区域的可见部分的尾部对齐(前提是当前区域可滚动)。如果没有提供该参数,默认为true

    使用该方法的原理与使用锚点的原理类似,在页面最上方设置目标元素,当页面滚动时,目标元素被滚动到页面区域以外,点击回到顶部按钮,使目标元素重新回到原来位置,则达到预期效果

    <body style="height:2000px;">
        <div id="target"></div>
        <button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button>
        <script>
            test.onclick = function(){
                target.scrollIntoView();
            }
        </script>
    </body>
    

    增加scrollTop的动画效果

    使用定时器requestAnimationFrame,将scrollTop的值每次减少50,直到减少到0,则动画完毕。IE9-浏览器不支持该方法,可以使用setTimeout来兼容

    <script>
    var timer  = null;
    box.onclick = function(){
        cancelAnimationFrame(timer);//清除定时器
        timer = requestAnimationFrame(function fn(){
            var oTop = document.body.scrollTop || document.documentElement.scrollTop;
            if(oTop > 0){
                document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
                timer = requestAnimationFrame(fn);
            }else{
                cancelAnimationFrame(timer);//清除定时器
            }    
        });
    }
    </script>
    

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

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

    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); 
    
    展开全文
  • 下面小编就为大家带来一篇jquery实现跳到底部,回到顶部效果的简单实例(类似锚)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • css: html: top javascript: //jquery官网:https://www.bootcdn.cn/jquery/ 效果

    css:

    <style>
            div {
                width: 100%;
                height: 500px;
                margin: 10px;
            }
    
            button {
                width: 100px;
                height: 100px;
                background: rgba(0, 0, 0, 0.3);
                position: fixed;
                right: 50px;
                bottom: 50px;
                font-size: 36px;
                line-height: 100px;
                text-align: center;
                color: #fff;
                outline: none;
                border: none;
                display: none;
            }
        </style>

    html:

     <div style="background: red;"></div>
        <div style="background: purple;"></div>
        <div style="background: paleturquoise;"></div>
        <div style="background: orange;"></div>
        <button>top</button>

    javascript:

    //jquery官网:https://www.bootcdn.cn/jquery/
    <script src="./js/jquery.js"></script>
        <script>
            //   当页面滚动距离 >= 500 显示
            $(window).scroll(function () {
                if ($(window).scrollTop() >= 500){
                    $('button').show();
                }else{
                    $('button').hide();
                }
            });
            // 点击按钮 回到页面顶部
            $('button').click(function () {  
                $('html,body').animate({'scrollTop':0})
            });
        </script>
    

    效果:

     

    展开全文
  • 主要为大家详细介绍了vue.js实现回到顶部动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 当网页内容草鸡多的时候,用户就需要有个按钮快速回到顶部,于是用js来实现下,画布多说,直接上代码
  • jQuery可爱火箭回到顶部效果代码
  • 背景:现在的网站基本上都是长页面,多的有四五屏,少的话也有两三屏,页面太长有的时候为了提升用户体验,会在页面右边出现一个回到顶部的按钮,这样能快速回到顶部,以免在滑动页面出现视觉屏幕,回到顶部一般有四...

    5268f80b9b1e01f982625ef6fac83ca1.png

    8e030a94c6ba43eba7c442322ebda573.png

    背景:

    现在的网站基本上都是长页面,多的有四五屏,少的话也有两三屏,页面太长有的时候为了提升用户体验,会在页面右边出现一个回到顶部的按钮,这样能快速回到顶部,以免在滑动页面出现视觉屏幕,回到顶部一般有四种方式。

    1、通过锚链接回到顶部,需要将body加入一个名为top的标记回到顶部

    2、通过JavaScript的scroll回到顶部,控制水平和垂直方向JavaScript回到顶部

    3、通过JavaScript控制,缓慢向上滑动,不过不够平滑JavaScript缓慢向上滑动function goScrollTop() {

    //把内容滚动指定的像素数(第一个参数是向右滚动的像素数,第二个参数是向下滚动的像素数)

    //向上是负数,向下是正数

    window.scrollBy(0, -100);

    //延时递归调用,模拟滚动向上效果

    scrolldelay = setTimeout('goScrollTop()', 100);

    //获取scrollTop值,声明了DTD的标准网页取document.documentElement.scrollTop,否则取document.body.scrollTop;因为二者只有一个会生效,另一个就恒为0,所以取和值可以得到网页的真正的scrollTop值

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

    //判断当页面到达顶部,取消延时代码(否则页面滚动到顶部会无法再向下正常浏览页面)

    if (sTop == 0) clearTimeout(scrolldelay);

    }

    4、当滚动条滚动到一定位置的时候显示,滚动条向上回滚的时候隐藏向上的回到顶部按钮,这种方式是最常用的方式

    Go

    jQuery代码:function goTop(min_height) {

    $(".goTop").click(

    function() {

    $('html,body').animate({

    scrollTop: 0

    }, 700);

    });

    //获取页面的最小高度,无传入值则默认为600像素

    min_height=min_height?min_height:400;

    //为窗口的scroll事件绑定处理函数

    $(window).scroll(function() {

    //获取窗口的滚动条的垂直位置

    var s = $(window).scrollTop();

    //当窗口的滚动条的垂直位置大于页面的最小高度时,让返回顶部元素渐现,否则渐隐

    if (s > min_height) {

    $(".goTop").fadeIn(100);

    } else {

    $(".goTop").fadeOut(200);

    }

    });

    }

    $(function() {

    goTop();

    });

    css代码:.goTop {

    height: 40px;

    width: 40px;

    background: red;

    border-radius: 50px;

    position: fixed;

    top: 90%;

    right: 3%;

    display: none;

    }

    .goTop span {

    color: #fff;

    position: absolute;

    top: 12px;

    left: 8px;

    }

    推荐教程:css快速入门

    展开全文
  • jquery回到顶部效果

    2015-01-26 09:51:27
    滚动鼠标按钮显示 点击按钮 直接到页面顶部
  • 主要为大家详细介绍了Vue实现回到顶部和底部动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 回到顶部效果

    2021-12-28 08:16:02
    这是css样式; ...这是效果图,点击右下角的向上的箭头,即可回到顶部。 这是我自己想到的,希望可以帮助到你们。 以上就是我的分享,请多多指教。如果有更好的方法欢迎在评论区教导喔! ...
  • 原生js、实现缓慢回到顶部效果

    千次阅读 2019-02-15 21:35:26
    原生js、计时器实现回到顶部效果 1.Demo展示: 2 . Html布局: &amp;amp;amp;lt;!--返回顶部--&amp;amp;amp;gt; &amp;amp;amp;lt;div class=&amp;amp;quot;gotop&amp;amp;quot;&...
  • 【代码】js实现点击回到顶部 滚动条慢慢回到顶部效果
  • 最近在模仿各大网站写页面样式和交互,发现好多都有回到顶部的需要,所以写了一下js,记录下来。 发现还可以添加从快到慢的动画效果和随时下拉滚动条停止滚动的功能, 参考了imooc上相关课程,最终实现JS代码如下: ...
  • js实现返回顶部效果

    2020-10-20 05:34:57
    本文主要介绍了js实现返回顶部效果的实例。具有很好的参考价值。下面跟着小编一起来看下吧
  • 用Javascript实现回到顶部效果 经常看到网页中有回到顶部的效果,今天也研究一下回到顶部有哪些方法。众所周知,用锚链接是实现回到最简单的方法,但是从用户体验效果来说,并不是最好的。(锚链接回到顶部时太快了...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 65,964
精华内容 26,385
关键字:

回到顶部效果