Tôi có thể cập nhật window.location.hash mà không cần phải cuộn trang web không?

Question

Sử dụng JavaScript, có cách nào để cập nhật window.location.hash mà không cần cuộn trang web không?

Tôi có các thành phần tiêu đề có thể nhấp để chuyển đổi chế độ hiển thị của div ngay bên dưới chúng. Tôi muốn thanh/foo # trong lịch sử khi nhấp vào tiêu đề nhưng không muốn cuộn trang. Vì vậy, khi điều hướng khỏi/foo # bar, tôi sẽ có thể sử dụng nút quay lại và có div có ID trong window.location.hash hiển thị khi trả về.

Hành vi này có thể xảy ra không?

Answer 1

Hành vi này rất có thể xảy ra. Bạn nên xem xét một số thư viện đã được phát triển để cung cấp cho bạn chức năng này.

Lịch sử Really Simple: http://code.google.com/p/reallysimplehistory/ SWFAddress: http://www.asual.com/swfaddress/

Answer 2

Một điều bạn có thể thử thay đổi id của phần tử điểm băm để tạm thời. Đã làm cho tôi!

function changeHashWithoutScrolling(hash) { 
    var id = hash.replace(/^.*#/, ''), 
     elem = document.getElementById(id) 
    elem.id = id+'-tmp' 
    window.location.hash = hash 
    elem.id = id 
} 

Answer 3

Dễ dàng như nó có được

var scrollmem = $('html,body').scrollTop(); 
window.location.hash = hash; 
$('html,body').scrollTop(scrollmem); 

Answer 4

Để thay đổi băm mà không cần phải tải lại trang/cuộn, bạn bây giờ có thể chỉ cần sử dụng html5 history.pushState.

history.pushState(null,null,'#hashexample'); 

Nó được hỗ trợ bởi tất cả các trình duyệt chính:

http://caniuse.com/history

MDN:

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history#The_pushState().C2.A0method

Cũng lưu ý rằng tham số url cuối cùng chúng ta đang sử dụng ở đây, nó có thể là bất kỳ url nào, do đó, nó không bị giới hạn trong băm.

Answer 5

Wanted để thêm một bình luận cho câu trả lời Catherines nhưng tôi không có đại diện được nêu ra -.

vĩ đại giải pháp tuy nhiên nó không được làm việc cho tôi trong Chrome như $ ('html') scrollTop() luôn trả về 0 - sửa đổi nhỏ giải quyết vấn đề này:

scrollmem = $('html').scrollTop() || $('body').scrollTop(); 
window.location.hash = hash; 
$('html,body').scrollTop(scrollmem); 

Answer 6

Bas trên câu trả lời từ Nắng tôi đã thực hiện chức năng này mà cũng tránh undefined và null:

function changeHashWithoutScrolling(hash) { 
     var id; 
     var elem; 

     id = hash.replace(/^.*#/, ''); 

     if (id) { 
      elem = document.getElementById(id); 

      if (elem) { 
       elem.id = id + '-tmp'; 
       window.location.hash = hash; 
       elem.id = id; 
      } 
     } 
    }