scrollTo sau a href với jQuery/JavaScript

Question

Tôi đang xây dựng trang web html và vấn đề chính hiện tại là tôi không biết cách cuộn đến một phần của trang sau khi nhấp vào liên kết mới. Những gì tôi đã làm là tôi đã sử dụng phương pháp scrollTop jQuery:

$("#klienti2").click(function(){ 
    $('.parallax').animate({ scrollTop: windowHeight }, 'slow'); 
}); 

và nó đã cuộn số lượng cửa sổHighight từ phía trên cùng của màn hình. Tôi chọn phương pháp này bằng cách sử dụng điều hướng với id, bởi vì không có nội dung tại chỗ mà tôi cần phải cuộn.

Vì vậy, những gì tôi đang tìm kiếm bây giờ là làm điều tương tự sau khi chuyển hướng đến trang này từ trang khác. Những gì tôi đã thử là:

$("#audio2").click(function(){ 
    window.location.href = "prew2.html"; 
    $('.parallax').animate({ scrollTop: windowHeight*2.6 }, 'slow'); 
}); 

nhưng bây giờ nó chỉ chuyển hướng đến trang đó mà không cần cuộn. Bất kỳ ý tưởng tại sao? Tôi nghĩ rằng, bỏ mã, nó nên href đến vị trí và sau đó animate đến vị trí quy định, nhưng nó dường như bỏ qua các animate.

Answer 1

Kịch bản của bạn nói với trình duyệt để mở một Url mới trên nhấp chuột

window.location.href = "prew2.html"; 

Bây giờ Browser điều hướng đến địa chỉ này, dừng tất cả các kịch bản thực tế và xây dựng một DOM mới.

$('.parallax').animate({ scrollTop: windowHeight*2.6 }, 'slow'); 

Mã này là không bao giờ đạt được và sẽ không bao giờ thực hiện.

Answer 2

Đặt bên ngoài câu lệnh nhấp chuột gốc và trên trang đang được điều hướng đến.

if(window.location.href === "prew2.html"){ 
    $('.parallax').animate({ scrollTop: windowHeight*2.6 }, 'slow');  
} 

Một đơn giản câu lệnh if sẽ kiểm tra và sau đó áp dụng những thay đổi khi bạn đạt rằng url

Answer 3

Từ bình luận: HTML là quốc tịch. Khi bạn thay đổi href, bất kỳ điều gì sau đây đều bị bỏ qua khi mã được tải xuống. Bạn cần chuyển một thứ gì đó đến trang nhận (ví dụ: tham số chuỗi truy vấn trên prew2.html) và phản hồi điều đó thay vì từ bên trong prew2.html.

Trang nhận cần biết có hay không, để cuộn đến vị trí dự định. Quyết định đó có nên cuộn hay không, được thực hiện bởi người gọi.

Phương pháp hiển nhiên là chuyển một tham số trong chuỗi truy vấn. Như mã này hoạt động giống như một URL bookmark, bạn cũng có thể sử dụng một URL đánh dấu cho công việc và kiểm tra một giá trị đánh dấu cụ thể:

Trong trang đầu tiên của bạn mã liên kết sẽ là một cái gì đó như:

$("#audio2").click(function(){ 
    window.location.href = "prew2.html#doitnow"; 
}); 

Tất nhiên nếu đó chỉ là một neo bình thường, điều này sẽ làm tương tự:

<a id="audio2" href="prew2.html#doitnow">Click me</a> 

Trong trang nhận mã sẽ là như thế này:

$(function(){ // Shortcut for DOM ready handler 
    if (location.href.indexOf("#doitnow") >=0){ 
     $('.parallax').animate({ scrollTop: windowHeight*2.6 }, 'slow'); 
    } 
});