美文网首页
返回顶部

返回顶部

作者: Devin_tao | 来源:发表于2019-11-26 17:10 被阅读0次

jQuery

$('.totop').on('click', function () {
            $('body,html').animate({
                scrollTop: 0,
            }, 80);
        })

原生

var topBtn = document.querySelector('.totop');
        
        function totop(speed, delay) {
            var timer = null;

            timer = setInterval(function () {
                var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
                document.documentElement.scrollTop = document.body.scrollTop = currentScroll - speed;
                if (currentScroll == 0) {
                    clearInterval(timer);
                }
            }, delay);
        }

        topBtn.addEventListener('click', function () {
            totop(50, 10);
        })

相关文章

  • Vue与小程序的返回顶部记录

    默认返回顶部按钮是隐藏,滚动一段距离后才显示 VUE 返回顶部 小程序 返回顶部

  • js 返回页面顶部(动画)

    js 返回到页面顶部,含有渐变或者动画效果 点击返回顶部按钮,页面逐渐向上回到顶部: js 返回到页面顶部,直接返...

  • 返回顶部

    function goTop(doc) {var timer = null,current = 0, //当前位置...

  • 返回顶部

    jQuery 原生

  • 返回顶部

  • 绽放

    返回顶部

  • 返回顶部实现

    当用户下拉一定距离,显示返回顶部按钮 监听下拉 返回顶部

  • 用vue封装一个返回顶部的按钮组件goTop.vue

    这是1个封装好的返回顶部组件 在需要使用返回顶部按钮的地方引入使用即可 如果全局都需要返回顶部按钮,直接在app....

  • 返回顶部按钮

    之前写过几次返回顶部的按钮,但是因为没有在动画结束时,使用回调函数,所以一直没发现,其实动画是执行了两次的。各大论...

  • JS返回顶部

    当鼠标滚轮滚到页面底部或中部,需点击一个页面中固定定位的div,让页面回到顶部最开始加载的位置。

网友评论

      本文标题:返回顶部

      本文链接:https://www.haomeiwen.com/subject/rlrywctx.html