滚动页面显示侧边栏点击回到顶部

用到的知识点

window.pageYOffset()   //浏览器滚动的页面到顶部左上角Y的位置的距离
window.pageXOffset()   //浏览器滚动的页面到左侧X的距离
scrollBy(x,y)          //相对当前位子滚动的
scrollTo(x,y)          //浏览器原地0,0开始滚动位置
window.onresize 或  window.addEventListener('resize',function(){}) //当浏览器大小发生改变时触发
window.onscroll 或 window.addEventListener('scroll',function(){}) //当浏览器发生滚动时触发
xxx.offsetTop         //本元素顶部边框到带有定位的父盒子顶部的距离
xxx.offsetLeft        //本元素左边框到带有定位的父盒子左边框的距离
setInterval(function(){},1000)    //每秒执行1次里面的方法
clearInterval(定时器的变量名) //清除定时器

js的代码

//获取banner盒子
let banner = document.querySelector('.banner')
//获取侧边漂浮盒子
let float_box = document.querySelector('.float_box')
//获取侧边漂浮栏返回顶部的盒子
let back_hd = document.querySelector('.back_header')
//获取漂浮盒子到定位父盒子距离
let float_top = float_box.offsetTop
//当浏览器发生滚动时触发事件
window.addEventListener('scroll', function () {
    console.log(window.pageYOffset)
    // 当滚动距离大于banner盒子到浏览器顶部距离时执行方法
    if (window.pageYOffset > banner.offsetTop) {

        flxed()
    } else {
        absolute()
    }

})
// 当浏览器大小发生改变时触发
window.addEventListener('resize', function () {
    if (window.pageYOffset > banner.offsetTop) {
        flxed()
    } else {
        absolute()
    }
})
//当点击返回时返回顶部
back_hd.addEventListener('click', function () {
    let y = window.pageYOffset
    //动态返回
    let a = setInterval(function () {
        y -= 50
        scrollTo(0, y)
        console.log(y)
        if (y <= 0) {
            clearInterval(a)
        }
    }, 10)



})
//当banner到达顶部之后时显示回到顶部
function flxed() {
    float_box.style.position = "fixed"
    //漂浮盒子固定的位置
    float_box.style.top = float_top + 'px'
    float_box.style.left = banner.offsetLeft + 1200 + "px"
    //盒子显示
    back_hd.style.display = "block"
}
//当banner离开顶部之后隐藏顶部
function absolute() {
    float_box.style.position = "absolute"
    //漂浮盒子固定的位置
    float_box.style.top = float_top + 'px'
    float_box.style.left = banner.offsetWidth + "px"
    //盒子隐藏
    back_hd.style.display = "none"
}

HTML代码

//获取banner盒子
let banner = document.querySelector('.banner')
//获取侧边漂浮盒子
let float_box = document.querySelector('.float_box')
//获取侧边漂浮栏返回顶部的盒子
let back_hd = document.querySelector('.back_header')
//获取漂浮盒子到定位父盒子距离
let float_top = float_box.offsetTop
//当浏览器发生滚动时触发事件
window.addEventListener('scroll', function () {
    console.log(window.pageYOffset)
    // 当滚动距离大于banner盒子到浏览器顶部距离时执行方法
    if (window.pageYOffset > banner.offsetTop) {

        flxed()
    } else {
        absolute()
    }

})
// 当浏览器大小发生改变时触发
window.addEventListener('resize', function () {
    if (window.pageYOffset > banner.offsetTop) {
        flxed()
    } else {
        absolute()
    }
})
//当点击返回时返回顶部
back_hd.addEventListener('click', function () {
    let y = window.pageYOffset
    //动态返回
    let a = setInterval(function () {
        y -= 50
        scrollTo(0, y)
        console.log(y)
        if (y <= 0) {
            clearInterval(a)
        }
    }, 10)



})
//当banner到达顶部之后时显示回到顶部
function flxed() {
    float_box.style.position = "fixed"
    //漂浮盒子固定的位置
    float_box.style.top = float_top + 'px'
    float_box.style.left = banner.offsetLeft + 1200 + "px"
    //盒子显示
    back_hd.style.display = "block"
}
//当banner离开顶部之后隐藏顶部
function absolute() {
    float_box.style.position = "absolute"
    //漂浮盒子固定的位置
    float_box.style.top = float_top + 'px'
    float_box.style.left = banner.offsetWidth + "px"
    //盒子隐藏
    back_hd.style.display = "none"
}

less代码

// out: ../css/,sourceMap:true
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.w {
    margin: 0 auto;
    width: 1200px;
    margin-bottom: 20px;
}

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

.banner {
    position: relative;
    display: flex;
    justify-content: space-between;
    height: 600px;
    background-color: plum;

    aside {
        width: 300px;
        background-color: rosybrown;
    }

    article {
        width: 850px;
        background-color: sandybrown;
    }
}

.main {
    height: 900px;
    background-color: rgb(40,
            194,
            173);
}

section {
    height: 100px;
    background-color: springgreen;
}

.footer {
    margin: 0 auto;
    height: 200px;
    background-color: seagreen;
}

.float_box {
    position: absolute;
    top: 300px;
    right: -100px;
    width: 100px;
    height: 300px;
    background-color: steelblue;

    .back_header {
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        background-color: tomato;
        cursor: pointer;
        display: none;
    }
}

思路：

1. window.pageYOffset > banner.offsetTop时切换成固定定位。

2.先将原来漂浮窗到它父盒子banner顶部的距离利用变量储存起来float_box.offsetTop。然后到变成浏览器固定定位时将float_box.offsetTop赋值给float_box.style.top就是可以实现下拉漂浮盒子固定不变了。

3.banner.offsetLeft当浏览器大小发生改变时的距离是不断变化的，我们应该利用banner盒子的宽度+banner.offsetLeft = 悬浮盒子左侧固定的位置

4.利用定时器实现动态返回顶部