Kích hoạt URL neo nhưng không di chuyển đến nó?

Question

Tôi có một trang có hai tab mà tôi muốn có thể chuyển đổi bằng Javascript, nhưng cũng đặt neo (ví dụ: page.html#tab1) trong URL để đánh dấu trang/liên kết.

Theo mặc định, nội dung tab nằm trong hai div, bên dưới thẻ còn lại và thẻ neo sẽ cuộn đến đúng, với JS bị tắt.

Khi bật JS, các lớp CSS được áp dụng để làm cho chúng hoạt động như các tab. Mỗi tab liên kết với mỗi liên kết, nhưng khi bạn nhấp để chuyển đổi các tab, trang sẽ cuộn đến tab. Nếu tôi trả về false từ hàm onclick thì URL sẽ không thay đổi để bao gồm anchor.

Làm cách nào để thay đổi URL trình duyệt thành page.html#tab1 nhưng không cuộn đến #tab1 ??

Answer 1

Tôi đã chơi trò chơi này một lúc, vì ban đầu tôi không tin bạn (tôi sử dụng jQuery history plugin để có hành vi tương tự).

Và tôi đang bối rối. Tôi không nghĩ bạn có thể. Những gì bạn có thể làm, như một giải pháp thay thế, là use javascript to set the hash to something DIFFERENT from what is actually on the page. Và sau đó sử dụng javascript khi tải để đọc băm và điền nội dung chính xác. I do this on my site. Vì vậy, trong trường hợp đó, người dùng không có javascript sẽ được cuộn, người dùng có javascript sẽ giữ chuỗi lịch sử và nó chỉ trở nên lúng túng khi mọi người không gửi liên kết tới những người có (hoặc ngược lại).

Answer 2

window.location.hash = 'tab1'; 

có thể hoạt động.

Answer 3

Bạn có thể có một số Javascript đã thay đổi tên neo, đặt window.location.hash, và sau đó thay đổi tên neo lại không?

(Tôi đã xác nhận rằng andynormancx là đúng và đặt window.location.hash cuộn chế độ xem, nhưng tôi quá lười để kiểm tra xem việc tạo một neo trong DOM đến window.location.hash cũng có cuộn không.)

Answer 4

var Namespace = { 
    var timer, scroll; 
} 

// Onclick 
Namespace.scroll = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop; 
Namespace.timer = setInterval(function() { scrollTo(0, Namespace.scroll) }, 100); 
location.hash = this.href; 
clearInterval(Namespace.timer); 

Answer 5

Một hack nhanh chóng:

var thehash = e.target.hash; 
$(thehash).prop('id',thehash.substr(1)+'-noscroll'); 
window.location.hash = e.target.hash; 
$(thehash+'-noscroll').prop('id',thehash.substr(1));  

này thay đổi id của phần tử html trước và sau khi thay đổi giá trị băm của url. Làm việc cho tôi, nhưng cũng có thể phá vỡ một cái gì đó. Điều này ngăn cản trình duyệt di chuyển trên một thay đổi băm, vì không có phần tử html với id đó ở giữa.