cách tự động cuộn xuống một trang html?

Question

Tôi đang cố gắng bắt đầu mỗi trang sau khi trang chủ khoảng 500px xuống, tương tự trang web này: http://unionstationdenver.com/

Bạn sẽ nhận thấy khi xem các trang sau trang chủ, bạn sẽ tự động cuộn xuống mà không cần thông báo nhưng bạn có thể cuộn lên để xem lại thanh trượt nổi bật một lần nữa.

Tôi đã chơi với scrolledHeight nhưng tôi không nghĩ rằng đó là những gì tôi cần ????

Về cơ bản tôi có một phần nổi bật ở trên đầu tất cả các trang nội dung của tôi, nhưng bạn không thể thấy phần này cho đến khi bạn cuộn lên. Bất kỳ giúp đỡ?

Answer 1

Sử dụng document.scrollTop để thay đổi vị trí của tài liệu. Đặt số scrollTop của số document bằng bottom của phần nổi bật trên trang web của bạn

Answer 2

Bạn có thể sử dụng hai kỹ thuật khác nhau để đạt được điều này.

Đầu tiên là với javascript: đặt thuộc tính scrollTop của phần tử có thể cuộn (ví dụ: document.body.scrollTop = 1000;).

Thứ hai là đặt liên kết trỏ đến một id cụ thể trong trang, ví dụ:

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

Sau đó, nếu trong trang mục tiêu của bạn, bạn sẽ có ID đó trang sẽ được cuộn tự động.

Answer 3

Bạn có thể sử dụng .scrollIntoView() cho việc này. Nó sẽ đưa một phần tử cụ thể vào khung nhìn.

Ví dụ:

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

Demo: http://jsfiddle.net/ThinkingStiff/DG8yR/

Script:

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

Answer 4

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

<style type="text/css"> 
 

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

 
</style>

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