更改窗口.基于媒体查询的滚动位置

Changing the window.scroll placement based on a media query?

本文关键字：查询 滚动 位置 媒体 窗口 于媒体      更新时间：2023-09-26

我正在处理的网站顶部有一个"强制性"标题，他们不让我删除。我的解决方法是使用正文 onLoad 事件在该标题下方启动窗口滚动，如下所示：

    <body <?php body_class(); ?> onLoad="window.scroll(0, 100)">

当我正在处理网站响应元素时，出现了这个问题。当屏幕点击 400px 媒体查询时，我会完全隐藏该div。这意味着我的网站仍在不必要地向下滚动 100px。

有没有办法根据该媒体查询将该 window.scroll 事件更改为不向下滚动（或者如果他们让我将标题放回移动设备上，尽管更小），则向下滚动更少）？

你可以玩这个小提琴

JAVASCRIPT：

$(window).load(function () {
    $('html, body').animate({
        scrollTop: $("#content").offset().top
    }, 1000);
});

基本上它会滚动到您想要显示的元素，因此如果标题不存在，#content 顶部将为 0，因此它不会滚动。

或者，您可以使用下面的代码，它将根据标题的高度滚动网站。无标题 = 没有高度 = 问题已解决。

$(window).load(function () {
    $('html, body').animate({
        scrollTop: $("#header").height()
    }, 1000);
});
相关文章：