0

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

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

但是，它只会跳转到该部分，并不能很好地向下滚动到该部分。

我可以在我的静态页面上做什么才能使用滚动效果转到该部分？

4

1 回答 1

1

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

script在带有 stellar 的页面上，您将在标签内但在 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);
}

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

我认为这可能有效。我添加了一点 setTimeout 来给 stellar 渲染一些时间。onComplete如果它有一个事件或类似的东西，我在它的文档中找不到。会好很多，但既然似乎没有，让我们试试这种方式。

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

更新：

如果您真的想使用哈希（例如：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了而不是。我们不使用 iframe，但如果有一天需要，我们会更好地防止 :P)window.location.hash

于 2013-04-26T20:31:28.763 回答