我想让每个页面从主页开始后向下移动约500px,类似于此网站:http://unionstationdenver.com/
浏览主页后,您会注意到在没有任何提示的情况下自动向下滚动,但是您可以向上滚动以查看特色幻灯片。
我已经尝试过滚动高度(scrolledHeight),但我认为那不是我需要的内容???
基本上我有一个特色部分位于所有我的内容页面之上,但是除非您向上滚动,否则不应该能够看到此部分。有什么帮助吗?
我想让每个页面从主页开始后向下移动约500px,类似于此网站:http://unionstationdenver.com/
浏览主页后,您会注意到在没有任何提示的情况下自动向下滚动,但是您可以向上滚动以查看特色幻灯片。
我已经尝试过滚动高度(scrolledHeight),但我认为那不是我需要的内容???
基本上我有一个特色部分位于所有我的内容页面之上,但是除非您向上滚动,否则不应该能够看到此部分。有什么帮助吗?
.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;
}
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>
document.body.scrollTop = 1000;
)。<a href="mypage.html#sectionOne">section one</a>
var topPosition = document.getElementById("myElement").offsetTop;
- Luca使用document.scrollTop
来改变文档的位置。将document
的scrollTop
设置为您网站特色部分的bottom
<?php
echo '<script type="text/javascript">document.scrollTop = 99999999;</script>';
ob_flush();
ob_end_flush();
flush();
ob_start();
?>
这对我来说很管用。