Question

我需要确保在用户加载页面时可以看到特定的行，即使该行在页面后面出现多行。换句话说，当页面加载时，它会立即跳转到该标记的行。该行只需要位于浏览器窗口的可见屏幕内。标记如下：

<div class="scrollhere">This line should always be visible when the page loads.</div>

整个页面中只显示其中一个。
我无法编辑标记文本的HTML，但可以在文档的开头编辑CSS和JavaScript。
我并不仅仅意味着要移动特定行，即使用position:absolute，而是将页面加载到该行。

如果在找到特定<div class="scrollhere">的任何地方，我如何在页面中间加载页面？

Answer 1

因此，如果您根本无法编辑HTML，那么您将需要使用JavaScript或jQuery。这是我用来滚动到元素的函数。

的Javascript

这将查询DOM中包含您的类scrollhere的所有元素。我们将只选择数组中的第一个项目（转到第一个元素）。然后我们将使用scrollIntoView()。

document.getElementsByClassName('scrollhere')[0].scrollIntoView()

的jQuery

/*
 * A scrollTo function that gets passed a selector (ID, class, element) & an optional offset
 *
 * @param {string}  location ('#resultsTop')
 * @param {integer} offset   (-100)
 */
function scrollTo(location, offset) {
    $("html, body").animate({scrollTop: ($(location).offset().top + (offset || 0) )}, "slow");
    return false;
};

在您的情况下，您可以按如下方式调用此函数：

scrollTo('.scrollhere');

您也可以选择传入offset。所以也许你不想滚动到该元素的顶部。但宁可滚动到它上面的100 pixels。

scrollTo('.scrollhere',-100);

由于您无法编辑HTML，因此您肯定希望使用侦听器。

$(document).ready(function(){
  scrollTo('.scrollhere',-100);
});

Answer 2

这是一个纯JavaScript示例。不需要jQuery。

以下是JSFiddle中此答案的一个简单示例。

window.onload = function() {
    var divs = document.getElementsByTagName("div");

    for (var i in divs) {
        if (divs[i].className.indexOf("class2") > -1) {
            //Finds top of of the element
            var top = 0;
            var obj = divs[i];

            if (obj.offsetParent) {
                do {
                    top += obj.offsetTop;
                } while (obj = obj.offsetParent);
            }

            //Scroll to location
            window.scroll(0, top);

            break;
        }
    }
};

Answer 3

此代码段可以帮助您

$('html, body').animate({
    scrollTop: ($('.class').first().offset().top)
},500);

如何在加载时将页面加载向下滚动到<div>？</div>

3 个答案:

的Javascript

的jQuery