手動滾動到錨點時更改網址？

默認情況下，如果我在我的網站上有錨點，那麼當我點擊一個鏈接（即www.mysite.com/#anchor）時，地址欄上的網址就會發生更改手動滾動到錨點時更改網址？

是否可以更改當我滾動到錨點時，地址欄中的URL會立即顯示？或者當我點擊一個新的錨點時，在地址欄上有一個包含多個錨點和url更改的長文檔？

2013-02-02 r1987

嘗試使用這個jQuery插件：Scrollorama。它有很多很酷的功能，你可以使用window.location.hash來更新你的瀏覽器散列。

或者，您可以添加一個「滾動」事件來檢查何時到達錨點。

這裏是工作提琴來說明事件：http://jsfiddle.net/gugahoi/2ZjWP/8/ 例子：

$(function() { 
    var currentHash = "#initial_hash" 
    $(document).scroll(function() { 
     $('.anchor_tags').each(function() { 
      var top = window.pageYOffset; 
      var distance = top - $(this).offset().top; 
      var hash = $(this).attr('href'); 
      // 30 is an arbitrary padding choice, 
      // if you want a precise check then use distance===0 
      if (distance < 30 && distance > -30 && currentHash != hash) { 
       window.location.hash = (hash); 
       currentHash = hash; 
      } 
     }); 
    }); 
});

來源

2013-02-02 09:56:40

謝謝你，以上所有答案也是對的！ – r1987

令人驚歎！對我的項目使用分叉版本。但是，我們意識到，每次散列被改變時，使用它都會導致「滾動跳轉」。所以，我們使用historyAPI來解決我們的問題。 \t \t \t如果（history.pushState）{ \t \t \t歷史。pushState（null，null，「＃」+ hash）; \t \t \t} \t \t \t否則{ \t \t \t window.location.hash = '#myhash'; \t \t \t} – Prashant

您可以使用HTML 5 pushState的更改URL地址欄

window.history.pushstate

來源

2013-02-02 09:45:52 user2031802

location.hash更方便 –

您應該在回答中包含顯着部分;鏈接有一個壞習慣打破了互聯網（是的，我知道鏈接腐爛是蒂姆BL寵物peeve）。 –

綁定一隻手請致電jquery scroll event。
檢查錨點當前是否可以在屏幕上看到，並使用this jquery script。
使用pushState的或設置的位置（可能會造成跳躍）

來源

2013-02-02 09:52:10 palindrom

您可以綁定到jQuery的滾動事件（http://api.jquery.com/scroll/）和調用的回調的每個調用，檢查多遠的通過檢查該值來滾動文檔：.scrollTop（http://api.jquery.com/scrollTop/）並通過操作te location.hash對象（http://www.w3schools.com/jsref/prop_loc_hash.asp）來設置錨點。

這將是這樣的：

// Checks if the passed element is visible on the screen after scrolling 
// source: http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling 
function isScrolledIntoView(elem) { 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 

    var elemTop = $(elem).offset().top; 
    var elemBottom = elemTop + $(elem).height(); 

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
} 

$('#document').scroll(function(e) { 
    var anchors = $('.anchor'); 
    for (var i = 0; i < anchors.length; ++i) { 
    if (isScrolledIntoView(anchors[i])){ 
     var href = $(anchors[i]).attr('href'); 
     location.hash = href.slice(href.indexOf('#') + 1); 
     break; 
    } 
    } 
});

您可以更精確，如果錨選擇它們之後，進行排序，以便第一個可見錨將始終設置。

來源

2013-02-02 09:58:03

嗨，喬治，謝謝你分享這個。你能不能請一個與上面的代碼一起使用的示例html標記？ – Advanced

當然。這裏是一個例子：http://jsfiddle.net/7d5qU/10/。它應該工作，但我無法設法證明它，因爲jsfiddle隱藏內部網址... –

我認爲你需要做這樣的事情。未採取行動

var myElements = $("div.anchor"); // You target anchors 
$(window).scroll(function(e) { 
    var scrollTop = $(window).scrollTop(); 
    myElements.each(function(el,i) { 
     if ($(this).offset().top > scrollTop && $(myElements[i+1]).offset().top < scrollTop) { 
      location.hash = this.id; 
     } 
    }); 
});`

來源

2013-02-02 10:02:22 artnikpro

手動滾動到錨點時更改網址？

回答

相關問題