javascript - 如何在不滚动主屏幕的情况下跳转到滚动元素的某个位置？

Question

我div在页面上有一个容器 ( )。此容器具有滚动功能（由 提供overflow:auto; height:400px）。
我不需要提供一个 URL，它会打开一个页面，这样主页面就不会滚动，但容器中的文本会滚动。
我试过www.mysite.com#position了，但是通过这种方式，主页也会滚动（我需要，用户会看到屏幕顶部的标题，以及#position容器顶部的“”位置）

Answer 1

这可以通过 javascript 实现。我将在这里展示一个 jQuery 示例。

if (window.location.hash == '#position') {
    $('#containerDiv').animate({
     scrollTop: $("#actual_position").offset().top
 }, 2000);
}

actual_position应该是滚动到的地方。position应该只是在 url 而不是在页面上，以防止整个页面滚动。

Answer 2

您是否可以使用 css-properties: position:fixed, top:..., left:... 作为当用户滚动时应该留在您身边某个位置的元素。此外，您可以将所有不想滚动的内容放入 div 并定义 css-properties。

我希望这对您有所帮助。

Answer 3

Really it's an upgrading of Arjan answer (and now this really works).
As Arjan's suggestion the script will not work every time, but only by providing #scroll in the end of url (www.mysite.com#scroll). This script will scroll the container scroll bar to the #position element, and the all document will stay.

    jQuery(window).load(function(){
    container_top = jQuery('#container').offset().top;
    element_top = jQuery('#position').offset().top;
    element_relative_top = element_top -container_top;

    if (window.location.hash == '#scroll') {
        jQuery('#container').animate({
            scrollTop: element_relative_top
        }, 2000);
    }
})