32

有没有办法（使用 CSS3、JS 或介于两者之间的任何东西）让页面从向下滚动的某个点开始？

我希望我的页面在加载时没有最初显示的标题（这意味着它在用户的实际视口之上）。

有没有简单/容易的方法来解决这个问题？

4

13 回答 13

32

您可以使用标准 javascript: window.scroll(x, y)。

考虑到您将在 处执行此操作，这应该工作得很好onload，即窗口应该从 (0, 0) 开始。反复尝试，(x, y)直到你的头球到达你满意的位置。当然，只要标题移动，您就需要更改它。

例子：

<body onLoad="window.scroll(0, 150)">
于 2012-06-25T05:36:33.970 回答
24

HTML/DOM 解决方案

如果您有一个在标题之后包含您的内容的id给定div，那么您可能可以使用这种 URL 加载页面，http://website.com/page#id.

这将带您到 div 所在的位置。

Javascript 解决方案

您可以window.scroll(x,y)在页面加载时使用。

于 2012-06-25T05:42:30.070 回答
12

当前的答案会导致页面明显“跳转”，或者要求您知道要跳转的确切像素数。

我想要一个跳过容器的解决方案，无论容器的大小/内容如何，​​这就是我想出的：

HTML

<div class="skip-me">Skip this content</div>

CSS

// Hide the content initially with display: none.
.skip-me {
  display: none;
}
.unhide {
  display: block;
}

JS

// Unhide the content and jump to the right place on the page at the same time
function restoreAndSkipContent() {
  var hidden = document.querySelector('.skip-me');

  hidden.classList.add('unhide');
  window.scroll(0, hidden.offsetHeight);
};
restoreAndSkipContent();

工作演示在这里

于 2016-02-29T17:14:32.880 回答
10

这些是非常简单的技巧：

  1. 创建css偏移类并分配给body

    .offset{
     margin-top:-500px;
    }

    这样该主体将加载从顶部偏移 500px

  2. 然后将以下代码添加到正文

    <body class="offset" onLoad="window.scroll(0, 150)">

  3. 然后使用jquery，在页面加载时删除偏移类

    $(document).ready(function(){
   $(".row").removeClass("offset");
});
于 2014-03-31T14:43:09.590 回答
7

HTML - 命名锚点

您也可以使用好的旧锚。使用定义命名锚点

     <a id="start">any text</a>

这应该在必须考虑的地方进行定义。由于即使在屏幕底部也可以看到它，所以您可能需要将锚点设置在比要求低一点的位置。这样，我们将确保顶部不需要显示的内容被很好地隐藏。一旦定义为在页面加载时向下滚动，URL 应该是 page.aspx#start 而不是 page.aspx

<a href="#start">access within the same page</a>

<a href="page.aspx#start">access from outside the page</a>
于 2012-06-25T05:44:56.387 回答
2

使用 javascript scrollBy。要使此方法起作用，必须将窗口滚动条的可见属性设置为 true。因此，请确保您的页面足够长，以便垂直滚动条出现。

<html>
<head>
</head>
<body onLoad="window.scrollBy(0,100)">
     <div style="height:300px;"> Some text </div>
     <div style="height:900px;"> Some text 2 </div>
</body>
</html>
于 2012-06-25T05:43:24.870 回答
2

使用 Javascript window.scroll：

$(window).scroll(function(){ 
  if ($(this).scrollTop() > 100){ 
    $('something').hide();
  } 
  else{
      $j('something').show();

  }
});​
于 2012-06-25T05:47:18.627 回答
1

这对我有用。

<div class="demo">
        <h2>Demo</h2>
</div>


<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script>
        $(document).ready(function () {
            $('html, body').animate({
                scrollTop: $('.demo').offset().top
            }, 'slow');
        });
    </script>

谢谢。

于 2018-11-23T18:57:33.907 回答
0

jquery 中有一个名为 .scroll() 的函数。您可以使用该函数使标题仅在用户滚动站点时可见。

于 2012-06-25T05:29:56.997 回答
0

我遇到了问题中提到的完全相同的问题：

“我希望我的页面在加载时最初不显示标题”

我不是 Javascript 专家，但我认为我找到了一种聪明的方法，因为其他答案对最终结果并不满意。这是我的方式：

CSS：

#header {display:none}

JS：

window.onscroll = function() {document.querySelector('#header').style.display = "block"}
window.onload = function () {window.scrollTo({top: 1,behavior: 'smooth'})}

这是我运行的网站上的视频预览。

这对我来说很完美。1 像素向下滚动真的不是一个交易破坏者恕我直言，几乎不可能注意到，并且允许能够直接滚动顶部。

于 2020-04-11T23:49:20.923 回答
0

组合解决方案

每个单一的 JavaScript 优先解决方案都可能（并且通常确实）在 pageLoad 事件之前导致打嗝。正如 Uday 建议的那样，实现无缝滚动加载的最佳方法是使用负 CSS 边距。

就个人而言，我使用了类似于 Uday 的代码片段，但稍作调整以使其在没有 JavaScript 的浏览器中也能工作，并且不会重复滚动声明。

<!doctype html>
<html>
<head>
    <style>
        /* Can be in an external stylesheet as well */
        /* This is the ONLY place where you will specify the scroll offset */
        BODY.initialoffset {margin-top: -100px; /* Or whatever scroll value you need */}
    </style>
    <noscript>
        <!-- Browsers without JavaScript should ignore all this margin/scroll trickery -->
        <style>
            BODY.initialoffset {margin-top: initial; /* Or 0, if you wish */}
        </style>
    </noscript>
</head>
<body onLoad = "(function(){var B=document.getElementsByTagName('body')[0],S=B.currentStyle||window.getComputedStyle(B),Y=parseInt(S.marginTop);B.className=B.className.replace(/\binitialoffset\b/g,'');window.scroll(0,-Y);})()">
</body>
</html>

onLoad属性中的短自调用函数可以展开如下： 

(function(){
    /* Read the marginTop property of the BODY element */
    var body=document.getElementsByTagName('body')[0],
        style=body.currentStyle||window.getComputedStyle(body),
        offsetY=parseInt(style.marginTop);
    /* Remove the initialoffset class from the BODY. (This is the ugly, but everywhere-working alternative)... */
    body.className=body.className.replace(/\binitialoffset\b/gi,'');
    /* ...and replace it with the actual scroll */
    window.scroll(0, -offsetY);
    })()
于 2019-08-25T13:08:04.553 回答
0

我发现@bryanbraun 的建议非常有用。我发现删除 window.scroll 对隐藏导航栏产生了很好的效果。我只是将它添加到我的文档的头部：

      <script>
        function restoreSkippedContent() {
          var hidden = document.querySelector('.onScrollHide');

          hidden.classList.add('unhide');
          // window.scroll(0, hidden.offsetHeight);
        };
      </script>
      <style>
        .onScrollHide {
          display: none;
        }
        .unhide {
          display: unset !important;
        }
      </style>

然后在我的导航栏周围添加一个包装器和一个 onscroll 触发器而不是 onload：

<body onscroll="restoreSkippedContent()">
  <div class="navBarContainer onScrollHide">
    <nav> .... </nav>
  </div>
  ...
</body>

这是不会对用户造成任何干扰的好效果，但是当他们向上滚动时，他们会看到导航栏:)

目前在这里使用

于 2019-12-09T17:35:24.730 回答
0 
    function ScroolPositionButtom() {
    var elment = document.querySelector(".right .chat.active-chat");
    elment.scrollTo(0, elment.scrollHeight);
}

这对我来说是工作。我将此功能用于特定类。

于 2022-01-06T09:25:15.200 回答