从静态页面链接到Waypoint

Question

我有几张幻灯片在视差网站，但我有一个链接到一个静态页面。从静态页面中，如何链接回特定的幻灯片并保持滚动效果？

我使用Stellar.js作为我的视差脚本。

我在视差页面上的导航：

<nav class="navigation">
<ul>
  <li data-slide="1" >
    <div class="item"><a href="#">Slide 1</a></div>
  </li>
  <li data-slide="2">
    <div class="item"><a href="#">Slide 2</a></div>
  </li>
  <li >
    <div class="item"><a href="test.html">Slide 3</a></div>
  </li>
  <li data-slide="4">
    <div class="item"><a href="#">Slide 4</a></div>
  </li>
</ul>

​

每一张幻灯片是：

<div class="slide" id="slide4" data-slide="4"> content </div>

我试着把一个命名的锚放在幻灯片的上方：

<a id="section4"></a>
<div class="slide" id="slide4" data-slide="4"> content </div>

但是，它只是跳转到那个部分，而不是向下滚动到那个部分。

在我的静态页面上，我能做些什么才能进入具有滚动效果的那个部分呢？

Answer 1

让我们试试querystring方法。

在带有星号的页面上，您将在script标记中的某个地方添加此函数，但在jQuery的$(document).ready() (来自here的脚本)之外添加该函数：

function getParameterByName(name){
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regexS = "[\\?&]" + name + "=([^&#]*)";
    var regex = new RegExp(regexS);
    var results = regex.exec(window.location.search);
    if(results == null)
        return "";
    else
        return decodeURIComponent(results[1].replace(/\+/g, " "));
}

在您的$(document).ready()上，这个脚本(最好是在所有事情之后，特别出色)：

var slideToGo = getParameterByName('slide');
slideToGo = parseInt(slideToGo); //try make it a number
if($.type(slideToGo) == 'number'){ //make sure is a number
    var delay = setTimeout(function(){
        $('#navigation ul').find('li[data-slide='+slideToGo+'] .item a').click();
    },500);
}

因此，每次访问具有视差的页面时，这个脚本都会在URL的查询字符串中查找?slide=。如果找到它(并且是一个字符串而不是空的)，将尝试查找data-slide与?slide=中的数字相等的LI，然后单击它的锚。

我觉得这可能管用。我增加了一个小setTimeout，给恒星一些时间来渲染。如果它有onComplete事件或类似的东西，我在它的文档中找不到。会更好，但既然似乎没有，让我们试试这个方法。

当然，在静态页面上，链接将是pagewithstellar.html?slide=NN，其中NN是您想要返回的数据幻灯片的编号。

更新：

如果您真的想使用散列(例如:parallaxpage.html#幻灯片-4)，您将需要以下代码(然后将上面的代码与下面的代码交换)：

function getSlideNumberInHash() {
    var hash = document.URL.substr(document.URL.indexOf('#')); //returns #slide-N
    var slideNumber = hash.substr(hash.indexOf('-')+1); //returns -N. The +1 will make it return N
    return slideNumber;
}

var slideToGo = getSlideNumberInHash();
slideToGo = parseInt(slideToGo); //try make it a number
if($.type(slideToGo) == 'number'){ //make sure is a number
    var delay = setTimeout(function(){
        $('#navigation ul').find('li[data-slide='+slideToGo+'] .item a').click();
    },500);
}

我使用document.URL.substr而不是window.location.hash是因为this comment。我们没有与iframes合作，但如果有必要，最好在某一天加以预防。