如何自动向下滚动html页面？

Posted 2023-03-06

【中文标题】如何自动向下滚动html页面？

【英文标题】：how to automatically scroll down a html page?

【发布时间】：2012-02-05 03:10:05

【问题描述】：

我正在尝试在主页向下大约 500px 之后开始每个页面，类似于这个网站：http://unionstationdenver.com/

在主页之后查看页面时，您会注意到，您会自动向下滚动而不会发出通知，但您可以向上滚动以再次体验特色滑块。

我玩过scrolledHeight，但我认为这不是我需要的？？？？

基本上，我在所有内容页面的顶部都有一个特色部分，但在您向上滚动之前，您应该无法看到此部分。有什么帮助吗？

【问题讨论】：

你可能想看看这个。 ***.com/questions/8773405/…

甜蜜！我唯一担心的是您仍然可以看到滚动的动画。所以我点击的每个页面都会加载前 500 像素，然后滚动到它下面的内容。这会让用户感到厌烦。想法？

【参考方案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;

【讨论】：

此解决方案在 IE 下适用于我，但不适用于 Chrome。有什么想法吗？

更多信息：它在第一个页面加载时在 Chrome 中有效，但在刷新时无效。我认为这是由于这个错误：code.google.com/p/chromium/issues/detail?id=280460。如果我硬刷新它可以工作的页面，即单击 URL 栏并按 Enter。但是像页面刷新或单击刷新按钮（或按 F5）这样的软重置不起作用。

【参考方案2】：

您可以使用两种不同的技术来实现这一点。

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

第二个是将链接设置为指向页面中的特定ID，例如

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

如果在您的目标页面中您将拥有该 ID，则该页面将自动滚动。

【讨论】：

对于你的第一个技术，你是如何得到它的，所以它可以归结为特定元素的位置？

是的，我有关于做主播的想法，但这是最后的手段。我只是不知道这些人是怎么做到的unionstationdenver.com

@Wex 在纯 javascript 中，您可以像这样在文档中找到元素的位置：var topPosition = document.getElementById("myElement").offsetTop;

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

【参考方案3】：

这里是使用纯 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>

【参考方案4】：

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

【讨论】：

scrollTop 仅适用于 DOM 元素，不适用于文档