单击滚动到中心页面中的 div (1)

📌 相关文章

📜 单击滚动到中心页面中的 div (1)

📅 最后修改于: 2023-12-03 15:37:03.240000 🧑 作者: Mango

单击滚动到中心页面中的 div

在网页设计中，将某个div元素滚动到页面中央是一项很常见的需求。而且现在很多网站都使用单击操作让页面滚动到中心元素。本文将介绍如何通过JavaScript实现单击滚动到中心页面中的div。

HTML部分

首先需要创建一个HTML页面并定义一个div容器。

<!DOCTYPE html>
<html>
<head>
    <title>单击滚动到中心页面中的 div</title>
</head>
<body>
    <div id="container"></div>
</body>
</html>

CSS部分

需要使用CSS定义一些样式来使div容器居中显示。

#container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background-color: #eee;
}

JavaScript部分

首先需要为div容器添加单击事件监听器。当单击div容器时，执行一个滚动函数，在该函数中计算要滚动的距离并执行滚动动画。

var container = document.getElementById('container');

container.addEventListener('click', function() {
    scrollToCenter(container);
});

function scrollToCenter(element) {
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    var elementOffsetTop = element.getBoundingClientRect().top + scrollTop;
    var windowHeight = window.innerHeight || document.documentElement.clientHeight;
    var scrollTo = elementOffsetTop - (windowHeight / 2) + (element.offsetHeight / 2);
    scrollToPosition(scrollTo);
}

function scrollToPosition(scrollTo) {
    var scrollFrom = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    var scrollDiff = scrollTo - scrollFrom;
    var duration = 500;
    var startTime = null;

    function easeOutQuad(t, b, c, d) {
        return -c * (t /= d) * (t - 2) + b;
    }

    function animateScroll(currentTime) {
        if (startTime === null) {
            startTime = currentTime;
        }

        var timeElapsed = currentTime - startTime;
        var scrollPosition = easeOutQuad(timeElapsed, scrollFrom, scrollDiff, duration);

        window.scrollTo(0, scrollPosition);

        if (timeElapsed < duration) {
            requestAnimationFrame(animateScroll);
        }
    }

    requestAnimationFrame(animateScroll);
}

使用方法

将以上代码复制到对应的HTML、CSS、JavaScript文件中，并在浏览器中打开HTML文件。单击div容器，即可自动滚动到页面中心的位置。

以上就是单击滚动到中心页面中的div的实现方法。