CSS: 回到顶部侧边栏

 

复制代码
<!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>
    aside {
      position: absolute;
      left: 50%;
      top: 300px;
      margin-left: 600px;
      width: 45px;
      height: 130px;
      background: aqua;
    }

    .w {
      width: 1200px;
      margin: 10px auto;
    }

    header {
      height: 150px;
      background-color: palegreen;
    }

    .banner {
      height: 250px;
      background-color: plum;
    }

    main {
      height: 1000px;
      background-color: purple;
    }

    span {
      display: none;
      position: absolute;
      bottom: 0;
    }
  </style>
  <script>
    window.onload = function () {
      let aside = document.querySelector('aside')
      let banner = document.querySelector('.banner')
      let bannerOffsetTop = banner.offsetTop
      let offset = aside.offsetTop - bannerOffsetTop
      let main = document.querySelector('main')
      let goBack = document.querySelector('.go-back')
      document.addEventListener('scroll', function () {
        // console.log('banner.offsetTop:', banner.offsetTop)
        console.log('window.pageYOffset', window.pageYOffset)
        if(window.pageYOffset > banner.offsetTop) {
          aside.style.position = 'fixed'
          aside.style.top = offset + 'px'
          console.log(1111111111)
        } else {
          aside.style.position = 'absolute'
          aside.style.top = '300px'
          console.log(222222222222222)
        }
        if(window.pageYOffset > main.offsetTop) {
          goBack.style.display = 'block'
        } else {
          goBack.style.display = 'none'
        }
      })
      goBack.addEventListener('click', function () {
        // window.scroll({
        //   top:0,left:0,behavior:'smooth'
        // })
        animate(window, 0)
      })
    }

    function animate(obj, target, callback) {
      clearInterval(obj.timer)
      obj.timer = setInterval(function () {
        if(target === window.pageYOffset) {
          clearInterval(obj.timer)
          callback && callback
        }
        let step = (target - window.pageYOffset) / 10
        step = step > 0 ? Math.ceil(step) : Math.floor(step)
        // window.scroll({
        //   top: 0, left: 0, behavior: 'smooth'
        // })
        window.scroll(0, window.pageYOffset + step)
      }, 10)
    }
  </script>
</head>

<body>
  <aside>
    <span class="go-back">go-back</span>
  </aside>

  <header class="w">header</header>
  <div class="banner w">banner</div>
  <main class="w">main</main>
</body>

</html>
复制代码

 

复制代码
<!DOCTYPE html>
<html lang="en-US">

<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>
</head>
<script>
    let btn, timer, scrollTop
    window.onload = () => {
        console.log(article)
        btn = document.querySelector('button')
        btn.onclick = function() {
            console.log('btn')
            timer = setInterval(function() {
                document.documentElement.scrollTop -= 30
            }, 200)
        }
    }
    window.onscroll = function() {
        if(document.documentElement.scrollTop >= scrollTop) {
            clearInterval(timer)
        }
        scrollTop = document.documentElement.scrollTop
        console.log('%' * 30, scrollTop)


    }
</script>

<body>
    <style>
        body {
            width: 2000px;
            height: 2000px;
        }

        * {
            margin: 0;
            padding: 0;
        }

        article {
            width: 300px;
            height: 1100px;
            background-color: purple;
        }

        button {
            width: 50px;
            height: 50px;
            background-color: peru;
            position: fixed;
            bottom: 50px;
            right: 50px;
        }
    </style>
    <article id="article"></article>
    <button id="btn">btn</button>
    <script>
        // console.log(window.alert('alert'));
        // console.log(window.confirm('confirm'));
        // console.log(window.prompt('prompt'));
        function showLocation() {
            let log = [
                'Property (typeof): Value',
                `location (${typeof location}): ${location}`,
            ]
            for(const prop in location) {
                log.push(
                    `${prop} (${typeof location[prop]}): ${location[prop] || 'n/a'}`
                )
            }

            console.log(log.join('\n'))
        }

        window.onresize = function() {
            console.log(this, 'onresize')
        }

    </script>

</body>

</html>
复制代码

 

posted @   ascertain  阅读(86)  评论(0)  编辑  收藏  举报
相关博文：
·  CSS: rolling-overler navigation
·  CSS: double coin
·  使用jQuery实现回到顶部
·  【JS】使用JS实现回到顶部按钮功能
·  一个纯CSS写的返回顶部按钮组
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
历史上的今天：
2020-06-27 autotools
2020-06-27 grub2 加密
点击右上角即可分享
微信分享提示
AI IDE Trae