如何在2個單獨的頁面之間創建平滑滾動加載效果

Question

我在頁面上有bootstrap的smoothscroll.js的標准實現，可以在不同錨點之間很好地移動。

但是，該頁面的加載時間很長，因此建議我最好的做法是將該頁面分為2個頁面。 有什么想法可以修改JS來實現頁面之間的平滑滾動外觀嗎？

我對如何嘗試做到這一點感到困惑； 對編碼來說還很新！

謝謝

Answer 1

如果將其拆分為2個不同的HTML，請在兩個頁面上均使用<script src="yourscript.js"></script> 。

Answer 2

您可以將URL中的scrollto值作為哈希值傳遞，並且在兩個頁面的doc.ready函數中，您都可以檢查URL中的scrollto值。 如果找到，請執行平滑滾動到該位置。

這是我使用的一個簡單的“哈希獲取”功能：

// GET URL HASH VALUES ( USE:  getUrlVars() - RETURNS ARRAY... getUrlVars()["hashName"] - RETURNS STRING  ... [ url.html?something=1&otherThing=ABC ] )
function getUrlVars(){var a={};return window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,function(b,c,d){a[c]=d}),a}

並在您的doc.ready中：

$(document).ready(function(){
  var pageGoto = getUrlVars()["scrollTo"];

  if (pageGoto){
    smoothScroller(pageGoto);
  }
});

您將鏈接定位到其他頁面上的位置將是這樣的：

<a href="mypage.html?scrollTo=some-content">My Link</a>

---

如果要使用ajax在頁面上附加其他信息，則可以在頁面上設置一個屬性，以指示在執行滾動之前哪些鏈接需要附加新內容。 批量（只有一個頁面包含所有次要內容）或單點菜單 （僅加載與該鏈接相關的其他內容）。

的HTML：

<a href="#my-content' data-fetch="my-content.html">Goto My Content</a>

js：

$('a').filter('[data-fetch]').click(function(e){
  var clicked = $(e.target).closest('a')
  ,   fetch = clicked.attr('data-fetch')
  ;

  $.ajax({
    url: fetch,
    success: function(data){

      $('body').append(data);
      smoothScroller(clicked.attr('href'));

    });
  });
});

Answer 3

請向我們顯示您的代碼。 如果我們自己看不到問題，我們不能肯定地告訴您出了什么問題。

我最好的猜測是，您正在將內容加載到$(document).ready上使用jQuery選擇的元素中。 加載后，選擇器的內容可能尚未更新（取決於用例），這意味着JavaScript僅會看到原來在所選元素中的內容。 這樣，它只會滾動所選元素原始高度的長度。