zoukankan      html  css  js  c++  java
  • JavaScript 返回顶部效果

    代码实现:

    <!DOCTYPE html>
    <html lang="en">
    
    <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>Document</title>
        <style>
            .slider-bar {
                position: absolute;
                left: 50%;
                top: 300px;
                margin-left: 600px;
                 45px;
                height: 130px;
                background-color: pink;
            }
            
            .w {
                 1200px;
                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;
            }
            
            .goBack {
                cursor: pointer;
            }
        </style>
    </head>
    
    <body>
        <div class="slider-bar">
            <span class="goBack">返回顶部</span>
        </div>
        <div class="header w">头部区域</div>
        <div class="banner w">banner区域</div>
        <div class="main w">主体部分</div>
        <script>
            //1. 获取元素
            var sliderbar = document.querySelector('.slider-bar');
            var banner = document.querySelector('.banner');
            // banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面
            var bannerTop = banner.offsetTop
                // 当我们侧边栏固定定位之后应该变化的数值
            var sliderbarTop = sliderbar.offsetTop - bannerTop;
            // 获取main 主体元素
            var main = document.querySelector('.main');
            var goBack = document.querySelector('.goBack');
            var mainTop = main.offsetTop;
            // 2. 页面滚动事件 scroll
            document.addEventListener('scroll', function() {
                // 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位
                if (window.pageYOffset >= bannerTop) {
                    sliderbar.style.position = 'fixed';
                    sliderbar.style.top = sliderbarTop + 'px';
                } else {
                    sliderbar.style.position = 'absolute';
                    sliderbar.style.top = '300px';
                }
                // 4. 当我们页面滚动到main盒子,就显示 goback模块
                if (window.pageYOffset >= mainTop) {
                    goBack.style.display = 'block';
                } else {
                    goBack.style.display = 'none';
                }
            });
    
            // 3. 当我们点击了返回顶部模块,就让窗口滚动的页面的最上方
            goBack.addEventListener('click', function() {
                // 里面的x和y 不跟单位的 直接写数字即可
                // window.scroll(0, 0);
                // 因为是窗口滚动 所以对象是window
                animate(window, 0, 5);
            });
    
            function animate(obj, target, time, callback) {
                // 先清除以前的定时器,只保留当前的一个定时器执行
                clearInterval(obj.timer);
                obj.timer = setInterval(function() {
                    // 步长值写到定时器的里面,并设置为整数
                    var step = (target - window.pageYOffset) / 10;
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    if (window.pageYOffset == target) {
                        clearInterval(obj.timer);
                        // 回调函数写到定时器结束里面
                        callback && callback();
                    }
                    // obj.style.left = window.pageYOffset + step + 'px';
                    window.scroll(0, window.pageYOffset + step);
                }, time);
            }
        </script>
    </body>
    
    </html>
    
  • 相关阅读:
    python的三元运算符
    百度站长社区有价值SEO问题提炼(一)
    Python文件夹与文件的操作
    python核心编程课后题第二版第十章264页
    python核心编程课后题第二版第九章230页
    python核心编程课后题第二版第八章209页
    《python核心编程》课后题第二版第十一章308页
    PhoneGap源码分析1——说明
    EF db first 获取表名称
    SQL Server使用证书最小粒度授权
  • 原文地址:https://www.cnblogs.com/jacklzx/p/13856351.html
Copyright © 2011-2022 走看看