css3丝滑回到锚点位置

杨泽曦呐

于 2023-04-09 20:14:57 发布

阅读量128

点赞数 1

文章标签： css3 前端 css javascript html

本文链接：https://blog.csdn.net/m0_61450899/article/details/130046645

版权

纯css3如何在锚点中加入过渡效果，上码！！！

html,
body {
  scroll-behavior: smooth;
}/*锚点丝滑*/

在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>
        html,
        body {
            scroll-behavior: smooth;
        }

        /*锚点丝滑*/
        #father {
            position: relative;
            width: 100%;
            height: 2000px;
            background-color: #818181;
        }

        .son {
            width: 100%;
            height: 1600px;
            background-color: #e39898;
        }
    </style>
</head>

<body>
    <div id="father">
        <div class="son">
            内容
        </div>
        <a href="#father">回到顶部</a>
    </div>
</body>

</html>

并可以配合js进行使用

js点击事件回到顶部展示

<!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>
        html,
        body {
        scroll-behavior: smooth;
        }/*锚点丝滑（可以试着注掉对比效果）*/

        #father {
            position: relative;
            width: 100%;
            height: 2000px;
            background-color: #818181;
        }

        .son {
            width: 100%;
            height: 1600px;
            background-color: #e39898;
        }
    </style>
</head>

<body>
    <div id="father">
        <div class="son">
            内容
        </div>
        <div class="sonTow"><button>回到顶部</button></div>
    </div>
    <script>
        const button = document.querySelector('button')
        button.addEventListener('click', function () {
            window.scrollTo(0, 0)
        })//按钮点击事件
    </script>
</body>

</html>