从静态页面链接到Waypoint

Question

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

我使用恒星。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()之外(脚本从这里):

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);
}

我用document.URL.substr代替window.location.hash，因为这个评论。我们不使用iframe，但如果有一天需要，最好防止:P)