Question

我的页面上有一个bootstrap的smoothscroll.js的标准实现，可以在不同的锚点之间移动。

但是，页面加载时间很长，我已经建议最佳做法将其拆分为2页。任何想法我如何修改JS仍然实现页面之间平滑滚动的相同外观？

我很难过如何尝试这样做;相当新的编码！

由于

Answer 1

如果将其拆分为2个不同的HTML，请在两个页面上使用<script src="yourscript.js"></script>。

Answer 2

您可以将url中的scrollto值作为哈希值传递，并且在两个页面的doc.ready函数中，您可以检查url以获取scrollto值。如果找到，请执行smoothscroll到该位置。

这是我使用的一个简单的'哈希提取'功能：

// 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在页面上添加其他信息，您可以在页面上设置一个属性，以指示在执行滚动之前哪些链接需要附加新内容。批量处理（只有1个其他页面包含所有辅助内容）或 al carte （仅加载与该链接相关的其他内容）。

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只会看到最初在所选元素中的内容。因此，它只会滚动所选元素的原始高度的长度。

如何在2个单独的页面之间创建smoothscroll加载的效果

3 个答案: