Question

是否有办法（使用CSS3，JS或其他任何东西）让页面在某个点向下滚动？

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

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

Answer 1

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

考虑到你将在onload执行此操作，这应该可以正常工作，即窗口应该从（0,0）开始。与(x, y)一起玩，直到你的标题到达你满意的位置。当然，你需要在标题移动时随时更改它。

示例：

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

Answer 2

CSS解决方案

如果您在标题后面有id的{{1}}包含您的内容，那么您可以加载包含此类网址的网页div。

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

Javascript解决方案

您可以在页面加载时使用http://website.com/page#id。

Answer 3

这些是非常简单的技巧：

创建css偏移类并分配给正文
```
.offset{
     margin-top:-500px;
    }
```
因此该主体将从顶部

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

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

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

$(document).ready(function(){
   $(".row").removeClass("offset");
});

Answer 4

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

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

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();

Working Demo Here

Answer 5

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>

Answer 6

使用Javascript window.scroll：

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

  }
});

Answer 7

使用javascript scrollBy。要使此方法起作用，窗口滚动条的visible属性必须设置为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>

Answer 8

在jquery中有一个名为.scroll（）的函数..只有当用户滚动网站时，你才可以使用该函数使你的标题可见..

Answer 9

这项工作对我来说

<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>

谢谢。

Answer 10

组合解决方案

每个单一的JavaScript优先解决方案都可能（并且通常确实）导致pageLoad事件之前出现打h。正如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);
    })()

Answer 11

我发现@bryanbraun的建议非常有用。我发现删除window.scroll可以很好地隐藏导航栏。我只是将其添加到文档的开头：

owlapi-distribution

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

      <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>

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

它目前正在使用here

Answer 12

我遇到的问题完全相同：

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

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

CSS：

 let cell = tableView.dequeueReusableCell(withIdentifier: "DetailCell") as!
    DetailTableViewCell

    cell.titleLabel!.text = movieTitle

JS：

#header {display:none}

这是我运营的网站上的video preview。

对我来说很完美。向下滚动1像素确实不是交易破坏力，几乎不可能注意到，并且可以直接向上滚动。

在某个滚动点启动页面

12 个答案:

CSS解决方案

Javascript解决方案