我在视差网站上有几张幻灯片,但我有一个静态页面链接。从该静态页面,如何链接回特定幻灯片并保持滚动效果?
我正在使用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>
但是,它只会跳转到该部分,而不会向下滚动到该部分。
我可以在静态页面上执行哪些操作,以便能够使用滚动效果转到该部分?
答案 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)