0

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

但是，该页面的加载时间很长，我被建议最佳实践将其分成 2 页。有什么想法可以修改 JS 以在页面之间实现相同的平滑滚动外观吗？

我对如何尝试做到这一点感到困惑。相当新的编码！

谢谢

4

3 回答 3

0

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

于 2013-07-02T16:35:44.290 回答
0

您可以将 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 在页面上附加其他信息，您可以在页面上设置一个属性来指示哪些链接需要在执行滚动之前附加新内容。批量（只有 1 个其他页面包含所有次要内容）或al e 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'));

    });
  });
});
于 2013-07-02T16:44:53.140 回答
0

请向我们展示您的代码。如果我们自己看不到问题，我们就无法肯定地告诉您出了什么问题。

我最好的猜测是您正在将内容加载到您使用 jQuery on 选择的元素中$(document).ready。选择器的内容在加载后可能没有更新（取决于用例），这意味着 JavaScript 只会看到最初在所选元素中的内容。因此，它只会滚动所选元素原始高度的长度。

于 2013-07-02T16:46:39.300 回答