从静态页面链接到Waypoint

时间:2013-04-26 16:37:37

标签: jquery parallax jquery-waypoints

我在视差网站上有几张幻灯片,但我有一个静态页面链接。从该静态页面,如何链接回特定幻灯片并保持滚动效果?

我正在使用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>

但是,它只会跳转到该部分,而不会向下滚动到该部分。

我可以在静态页面上执行哪些操作,以便能够使用滚动效果转到该部分?

1 个答案:

答案 0 :(得分:1)

让我们尝试查询字符串方法。

在具有恒星的页面上,您将在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#slide-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);
}

由于this comment,我使用document.URL.substr代替window.location.hash。我们不使用iframe,但如果有需要,可以更好地防止:P)