2009-08-08 71 views
18

Có thể thay đổi vị trí thanh cuộn khi người dùng đạt đến một điểm nhất định di chuyển xuống một trang web không? Ví dụ một khi bạn đã đạt được một nửa xuống dưới trang thanh cuộn sẽ di chuyển tự động trở lại đầu trang.Thay đổi vị trí thanh cuộn

Trả lời

29

Bạn có thể tính toán tỷ lệ phần trăm của vị trí hiện tại của scrollbar bằng cách sử dụng sự kiện onscroll, và nếu nó đạt đến 50% các vị trí cuộn có thể được thiết lập để phía trên cùng của trang có scrollTo chức năng:

window.onload = function() { 
    window.onscroll = function() { 
    var doc = document.body, 
    scrollPosition = doc.scrollTop, 
    pageSize = (doc.scrollHeight - doc.clientHeight), 
    percentageScrolled = Math.floor((scrollPosition/pageSize) * 100); 

    if (percentageScrolled >= 50){ // if the percentage is >= 50, scroll to top 
     window.scrollTo(0,0); 
    } 
    }; 
}; 

Bạn có thể kiểm tra ví dụ của tôi here.

+1

@CMS: Câu trả lời tuyệt vời! – Josh

+0

window.scrollTo (0,0); không hoạt động với tôi trong chomre – SuperUberDuper

9

Yup, tôi đã xem nó một vài lần. Dưới đây là một số mã JS:

window.scrollBy (0,50)

50 là số lượng pixel bạn muốn cuộn.

2

(window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop) phải cung cấp cho bạn vị trí cuộn hiện tại trong bất kỳ trình duyệt nào.

4

Ba chức năng cuộn mà bạn muốn tự quan tâm là window.scroll(x,y), window.scrollBy(dx,dy)window.scrollTo(x,y).

Như David đã đề cập, bạn cần vị trí cuộn để biết bạn đang ở đâu và sử dụng sự kiện window.onscroll để kích hoạt tính toán này.

+1

Những tính năng này có sẵn trên tất cả các trình duyệt hoặc một số tính năng phát hiện được yêu cầu không? –

Các vấn đề liên quan