如何自动滚动HTML页面？

Question

我想让每个页面从主页开始后向下移动约500px，类似于此网站：http://unionstationdenver.com/

浏览主页后，您会注意到在没有任何提示的情况下自动向下滚动，但是您可以向上滚动以查看特色幻灯片。

我已经尝试过滚动高度（scrolledHeight），但我认为那不是我需要的内容？？？

基本上我有一个特色部分位于所有我的内容页面之上，但是除非您向上滚动，否则不应该能够看到此部分。有什么帮助吗？

- Hambone

---

你可能想看一下这个链接。https://dev59.com/W1_Va4cB1Zd3GeqPPQgL#8773563 - user950658

太好了！我唯一的担心是你仍然能看到滚动的动画。所以每个我点击的页面将加载前500像素，然后滚动到其下方的内容。这会让用户感到烦恼。你有什么想法吗？ - Hambone

Answer 1

您可以使用.scrollIntoView()来实现此功能。它将把特定元素带入可视区域。

示例：

document.getElementById( 'bottom' ).scrollIntoView();

演示: http://jsfiddle.net/ThinkingStiff/DG8yR/

脚本：

function top() {
    document.getElementById( 'top' ).scrollIntoView();    
};

function bottom() {
    document.getElementById( 'bottom' ).scrollIntoView();
    window.setTimeout( function () { top(); }, 2000 );
};

bottom();

HTML：

<div id="top">top</div>
<div id="bottom">bottom</div>

CSS：

#top {
    border: 1px solid black;
    height: 3000px;
}

#bottom {
    border: 1px solid red;
}

- ThinkingStiff

---

这个解决方案在IE下可以工作，但在Chrome下不行。有什么想法吗？ - jfritz42

更多信息：它在Chrome的第一次页面加载中工作，但在刷新时不起作用。我认为这是由于这个错误引起的：https://code.google.com/p/chromium/issues/detail?id=280460。如果我强制刷新页面，它就可以工作，即点击URL栏并按回车键。但是像页面刷新或单击刷新按钮（或按F5）之类的软重置不起作用。 - jfritz42

Answer 2

这里是使用纯JavaScript的示例。

function scrollpage() {  
 function f() 
 {
  window.scrollTo(0,i);
  if(status==0) {
      i=i+40;
   if(i>=Height){ status=1; } 
  } else {
   i=i-40;
   if(i<=1){ status=0; }  // if you don't want continue scroll then remove this line
  }
 setTimeout( f, 0.01 );
 }f();
}
var Height=document.documentElement.scrollHeight;
var i=1,j=Height,status=0;
scrollpage();
</script>

<style type="text/css">

 #top { border: 1px solid black;  height: 20000px; }
 #bottom { border: 1px solid red; }

</style>

<div id="top">top</div>
<div id="bottom">bottom</div>

- MohitGhodasara

Answer 3

你可以使用两种不同的技术来实现这个目标。

第一种方法是使用javascript：设置可滚动元素的scrollTop属性（例如document.body.scrollTop = 1000;）。

第二种方法是将链接设置为指向页面中的特定id，例如：

<a href="mypage.html#sectionOne">section one</a>

如果在目标页面中存在该ID，则页面将自动滚动。

- Luca

---

对于你的第一种技术，你如何将其定位到特定元素的位置？ - Wex

是的，我知道关于锚点的做法，但那是最后的办法。我只是无法确定这些人是如何做到的 http://unionstationdenver.com/ - Hambone

在纯JavaScript中，您可以像这样查找文档中元素的位置：var topPosition = document.getElementById("myElement").offsetTop; - Luca

@Hambone，你可以在这个脚本链接中看到他们正在使用窗口对象的scrollTo方法。更多信息：mozilla上的scrollTo。 - Luca

Answer 4

使用document.scrollTop来改变文档的位置。将document的scrollTop设置为您网站特色部分的bottom

- Sean H Jenkins

---

scrollTop 只适用于 DOM 元素，而非文档。 - Luca

Answer 5

<?php
        echo '<script type="text/javascript">document.scrollTop = 99999999;</script>';
        ob_flush();
        ob_end_flush();
        flush();
        ob_start();
?>

这对我来说很管用。

- Rene Veerman