页面返回顶部+淘宝侧边栏

一夕ξ

已于 2022-03-24 21:57:55 修改

阅读量400

点赞数

分类专栏：前端学习文章标签： html css webview

于 2022-03-12 17:03:28 首次发布

本文链接：https://blog.csdn.net/qq_45387575/article/details/123446273

版权

前端学习专栏收录该内容

77 篇文章 6 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px
        }
        
        .box {
            width: 600px;
            height: auto;
            margin-left: 200px;
            position: relative;
        }
        
        .top {
            width: 600px;
            height: 100px;
            background-color: pink;
        }
        
        .body1 {
            width: 600px;
            height: 900px;
            background-color: purple;
        }
        
        .nav {
            display: none;
            width: 600px;
            height: 100px;
            background-color: red;
            position: sticky;
            top: 0px
        }
        
        .bottom {
            width: 600px;
            height: 500px;
            background-color: blue;
        }
        
        ul {
            position: absolute;
            top: 400px;
            left: 600px;
            width: 40px;
            border: 1px solid grey;
            padding-left: 0px;
        }
        
        li {
            list-style: none;
            width: 40px;
            height: 41px;
            margin: 0px;
            text-align: center;
            display: inline-block;
            line-height: 22px;
            margin-top: 10px
        }
        
        a {
            color: black;
            text-decoration: none;
        }
        
        .top1 {
            display: none
        }
    </style>
    <script src="backtop.js"></script>
</head>

<body>
    <div class="box" id="two">
        <div class="top"></div>
        <div class="nav"></div>
        <div class="body1"></div>

        <div class="bottom"></div>
        <ul>
            <li><a href="javascrip:;">品质好货</a>
            </li>
            <li><a href="javascrip:;">猜你喜欢</a></li>
            <li class="top1"><a href="#two">顶部</a></li>
            <li><a href="javascrip:;">反馈</a></li>
            <li><a href="javascrip:;">暴恐举报</a></li>
        </ul>
    </div>


</body>

</html>

window.addEventListener('load', function() {
    //获得nav
    var nav = document.querySelector('.nav')
    var ul = document.querySelector('ul')
    var top1 = document.querySelector('.top1')
    console.log(ul.offsetLeft)
    document.addEventListener('scroll', function() {
            console.log(window.pageYOffset)
            if (window.pageYOffset >= 100) {

                nav.style.display = 'block'

            } else {
                nav.style.display = 'none'

            }
            if (window.pageYOffset >= 400) {
                ul.style.position = 'fixed'
                ul.style.top = 0 + 'px'
                ul.style.left = 800 + 'px'
            } else {
                ul.style.position = 'absolute'
                ul.style.top = 400 + 'px'
                ul.style.left = 600 + 'px'
            }
            if (window.pageYOffset >= 560) {
                top1.style.display = 'block'
            } else {
                top1.style.display = 'none'
            }

        })
        //给顶部添加点击事件
        // top1.addEventListener('click', function() {
        //     alert(1)
        //     window.pageYOffset = 0
        // })
})

不用锚点链接时

滚动窗口到文档中的特定位置：window.scroll(x,y)

        //给顶部添加点击事件
    top1.addEventListener('click', function() {
        window.scroll(0, 0)
    })

可以取得一样的效果

要滚动慢慢的滚动到页面顶部：

1、继续使用封装好的动画函数

2、把所有的left改为与页面垂直相关即可

3、页面滚动了多少，window.pageYOffset()

4、其次就是页面滚动，使用window.scroll(x,y)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px
        }
        
        .box {
            width: 600px;
            height: auto;
            margin-left: 200px;
            position: relative;
        }
        
        .top {
            width: 600px;
            height: 100px;
            background-color: pink;
        }
        
        .body1 {
            width: 600px;
            height: 900px;
            background-color: purple;
        }
        
        .nav {
            display: none;
            width: 600px;
            height: 100px;
            background-color: red;
            position: sticky;
            top: 0px
        }
        
        .bottom {
            width: 600px;
            height: 500px;
            background-color: blue;
        }
        
        ul {
            position: absolute;
            top: 400px;
            left: 600px;
            width: 40px;
            border: 1px solid grey;
            padding-left: 0px;
        }
        
        li {
            list-style: none;
            width: 40px;
            height: 41px;
            margin: 0px;
            text-align: center;
            display: inline-block;
            line-height: 22px;
            margin-top: 10px
        }
        
        a {
            color: black;
            text-decoration: none;
        }
        
        .top1 {
            display: none
        }
    </style>
    <script src="backtop.js"></script>
    <script src="animater.js"></script>
</head>

<body>
    <div class="box">
        <div class="top"></div>
        <div class="nav"></div>
        <div class="body1"></div>

        <div class="bottom"></div>
        <ul>
            <li><a href="javascrip:;">品质好货</a>
            </li>
            <li><a href="javascrip:;">猜你喜欢</a></li>
            <li class="top1"><a href="javascrip:;">顶部</a></li>
            <li><a href="javascrip:;">反馈</a></li>
            <li><a href="javascrip:;">暴恐举报</a></li>
        </ul>
    </div>


</body>

</html>

        //给顶部添加点击事件
    top1.addEventListener('click', function() {
        // window.scroll(0, 0)
        //因为是窗口滚动，所以对象是window。注意不是document
        animate(window, 0)
    })

function animate(obj, target, callback) {
    clearInterval(obj.timer) //先把原先地定时器清除之后，再开启另外一个新地定时器
    obj.timer = setInterval(fn, [15])

    function fn() {
        var a = window.pageYOffset
        var step = (target - a) / 10
        step = step > 0 ? Math.ceil(step) : Math.floor(step) //将结果赋值回去
            //把步长值改为整数，不要出现小数的情况
        if (a == target) {

            //取消定时器
            clearInterval(obj.timer)
                //执行回调函数 函数名+()回调函数写到定时器结束里面
                //首先判断没有有这个回调函数
            if (callback) {
                callback()
            }

        }

        // obj.style.left = a + step + 'px'
        window.scroll(0, a + step)

    }
}

jQuery--带有动画的返回顶部

1、使用animate动画返回顶部

2、animate动画函数里面有scrollTop属性，可以设置位置

3、注意animate做动画是正对于元素而言的，不是整个文档，

因此需要使用$('body, html').animate({scrollTop:0})

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .back {
            position: fixed;
            bottom: 100px;
            width: 50px;
            height: 50px;
            right: 30px;
            background-color: pink;
        }
        
        .container {
            width: 900px;
            height: 2000px;
            background-color: blue;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>

    <div class="back">返回顶部</div>
    <div class="container"></div>
    <script>
        $(function() {
            var b = $('.back').offset().top
            $(window).scroll(function() {
                if ($(document).scrollTop() >= b) {
                    $('.back').fadeIn()
                } else {
                    $('.back').fadeOut()
                }
            })
            $('.back').click(function() {
                // $(document).scrollTop(0)
                $('body,html').stop().animate({
                    scrollTop: 0
                }, 1000)
            })
        })
    </script>
</body>

</html>

一夕ξ

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
页面返回顶部+淘宝侧边栏

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title...
复制链接

扫一扫