hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 文章 - 后端开发 - 正文 看Cosplay古风插画小姐姐,合集图集打包下载:炫龙网 · 炫龙图库

JavaScript仿淘宝回到顶部结果(代码示例)_WEB前端开发

2019-12-01后端开发ki4网39°c
A+ A-
本篇文章给人人带来的内容是JavaScript仿淘宝回到顶部结果(代码示例)。有肯定的参考价值,有须要的朋侪能够参考一下,愿望对人人有所协助。

需求:当转动条到肯定位置时侧边栏牢固在某个位置,再往下滑动到某一位置时显现回到顶部按钮。点击按钮后页面会动态滑到顶部,速率由快到慢向上滑。

思绪:

1、页面加载终了才实行js代码

  能够将js代码写在最下边(本次回顶示例是用的这类)

  想写在上边能够用下边这两种:

   ①window.onload = function() {...}

   ②window.addEventListener('load', function() {...})

2、猎取须要用到的元素

3、绑定转动事宜 scroll

当用户滚到banner模块时使侧边栏变成牢固状况

if(window.pageYOffset >= bannerTop) {    // window.pageYOffset 屏幕被滚上去的间隔
    sliderbar.style.position = 'fixed';   // 当用户滚到banner模块时使侧边栏变成牢固状况
    sliderbar.style.top = sliderbarTop + 'px'; 
} else {
    sliderbar.style.position = 'absolute';
    sliderbar.style.top = '300px';
}

当用户滚到main模块时显现返回顶部按钮

 if(window.pageYOffset >= mainTop) {    // 当用户滚到main模块时显现返回顶部按钮
     goBack.style.display = 'block';
 } else {
     goBack.style.display = 'none';
 }

4、绑定点击事宜 click

点击返回顶部按钮后页面会动态滑到顶部,速率由快到慢向上滑动

 sliderbar.addEventListener('click', function() {
     animate(window, 0);
 })

5、关于动画函数 animate(obj, target, callback)

这里obj对象等于window;target目的位置等于0;callback是回调函数,没传参的话就能够疏忽

设置一个定时器 setInterval();

声明一个step作为步长值,值为顶部位置到当前转动条位置之差除以10(step会越来越小,转动速率也就越来越慢,完成了转动条的速率由快到慢的滑上去)

var step = (target - window.pageYOffset) / 10;

但是step并不老是整数,当step不是整数时能够让转动条再往前走一丢丢。转动条能够高低滑动,所以step大概大于零也大概小于零。大于零向上取整,小于零向下取整

step = step > 0 ? Math.ceil(step) : Math.floor(step);

window.scroll(x, y) 转动到文档特定位置,定时器每次挪用函数都邑往上滑一点

window.scroll(0, window.pageYOffset + step);

推断动画是不是实行终了,假如实行终了则封闭定时器 clearInterval();

if(window.pageYOffset == target) {  // 当页面回到顶部后(即动画实行完) 消灭定时器
    clearInterval(obj.timer);
    //  推断是不是传了回调函数
    /* if(callback) { 
        callback();
    } */
    // 能够简写为下边这类。 &&是短路运算符,存在callback(即第一个式子为true)时才会继承实行callback()
    callback && callback();
}

细致代码以下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>返回顶部结果</title>
    <style>
        .slider-bar {
            position: absolute;
            left: 47%;
            top: 300px;
            margin-left: 600px;
            width: 45px;
            height: 130px;
            background-color: pink;
            cursor: pointer;
        }
        .w {
            width: 1100px;
            margin: 10px auto;
        }
        .header {
            height: 150px;
            background-color: purple;
        }
        .banner {
            height: 250px;
            background-color: skyblue;
        }
        .main {
            height: 1000px;
            background-color: yellowgreen;
        }
        span {
            display: none;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div>
        <span>返回顶部</span>
    </div>
    <div class="header w">头部地区</div>
    <div class="banner w">banner地区</div>
    <div class="main w">主体部份</div>

    <script>
        // querySelector() 要领返回婚配指定选择器()的第一个元素,传的必需是字符串
        var sliderbar = document.querySelector('.slider-bar');
        var banner = document.querySelector('.banner');
        var bannerTop = banner.offsetTop; // banner模块间隔顶部的长度
        var sliderbarTop = sliderbar.offsetTop - bannerTop; // 侧边栏牢固后间隔顶部的长度

        var main = document.querySelector('.main');
        var goBack = document.querySelector('.goBack');
        var mainTop = main.offsetTop;  // main模块间隔顶部的长度
        
        // scroll 屏幕发作转动事宜时实行
        document.addEventListener('scroll', function() {
            if(window.pageYOffset >= bannerTop) {    // window.pageYOffset 屏幕被滚上去的间隔
                sliderbar.style.position = 'fixed';   // 当用户滚到banner模块时使侧边栏变成牢固状况
                sliderbar.style.top = sliderbarTop + 'px'; 
            } else {
                sliderbar.style.position = 'absolute';
                sliderbar.style.top = '300px';
            }
            
            if(window.pageYOffset >= mainTop) {    // 当用户滚到main模块时显现返回顶部按钮
                goBack.style.display = 'block';
            } else {
                goBack.style.display = 'none';
            }
            
        });
        sliderbar.addEventListener('click', function() {
            animate(window, 0);
        })

        /* 动画函数:
         *  obj 做动画的对象(这里就是指window)
         *  target 目的位置(顶部)
         *  callback 回调函数(没有传参的话就不实行)
         */
        function animate(obj, target, callback) {
            clearInterval(obj.timer);  // 先消灭定时器,保证只要一个定时器在实行,以避免涌现bug
            obj.timer = setInterval(function() {
                // window.pageYOffset间隔顶部的间隔(是负的)
                var step = (target - window.pageYOffset) / 10;  // step步长(让页面速率逐步变慢的滑动上去)
                step = step > 0 ? Math.ceil(step) : Math.floor(step); // step并不老是整数。大于零向上取整,小于零向下取整
                if(window.pageYOffset == target) {  // 当页面回到顶部后(即动画实行完) 消灭定时器
                    clearInterval(obj.timer);
                    //  推断是不是传了回调函数
                    /* if(callback) { 
                        callback();
                    } */
                    // 能够简写为下边这类。 &&是短路运算符,存在callback(即第一个式子为true)时才会继承实行callback()
                    callback && callback();
                }
                // window.scroll(x, y) 转动到文档特定位置
                window.scroll(0, window.pageYOffset + step);
            }, 15);
        }
    </script>
</body>
</html>

更多炫酷javascript殊效代码,尽在:js殊效大全

以上就是JavaScript仿淘宝回到顶部结果(代码示例)的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
JavaScript仿淘宝回到顶部结果(代码示例)_WEB前端开发

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>