顺滑的滚动到页面顶部

css部分

.web .box {
            width: 60vw;
            height: 60vw;
            background-color: tomato;
            margin: 0 auto;
            margin-bottom: 20vw; 
        }

        .web div:last-child {
            background-color: turquoise;
        }

html部分

<div class="web">
        <div class="box1 box"></div>
        <div class="box2 box"></div>
        <div class="box3 box"></div>
        <div class="box4 box"></div>
 </div>

js部分

const box4 = document.querySelector('.web .box4');
        box4.addEventListener('click', () => {
            // 这行代码是关键
            window.scrollTo({ top: 0, behavior: `smooth` });
        });
posted @ 2022-01-21 13:33  隐形的喷火龙  阅读(27)  评论(0)    收藏  举报