如何在2个单独的页面之间创建平滑滚动加载效果

Question

I have a standard implementation of bootstrap's smoothscroll.js on my page, which works fine moving between different anchors.

However, the page is quite long to load, and I've been advised best practice to split this into 2 pages. Any ideas how I could modify the JS to still achieve the same appearance of smooth scroll between pages?

I'm stumped at how I might try to do this; fairly new to coding!

Thanks

Answer 1

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

Answer 2

You can pass the scrollto value in the url as a hash, and in your doc.ready function for both pages you can check the url for a scrollto value. If found, execute a smoothscroll to that location.

Here's a simple 'hash fetching' function I use:

// 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}

And in your doc.ready:

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

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

And your links to target a location on a different page would be something like this:

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

---

If you're looking to use ajax to append additional information on the page you can set an attribute on the page to indicate which links need to append new content prior to executing your scroll. Either in bulk (there's just 1 other page with all the secondary content) or al e carte (loading only the additional content relevant to that link).

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

Please show us your code. We cannot tell you for sure what is wrong if we cannot see the issue, ourselves.

My best guess would be that you are loading the content into an element that you have selected with jQuery on $(document).ready . The selector's content may not have updated after loading (use-case dependent), meaning that the JavaScript would only see the content that was originally in the selected element. As such, it would only scroll the length of the selected element's original height.