0

視差サイトにはいくつかのスライドがありますが、1 つの静的ページへのリンクがあります。その静的なページから特定のスライドにリンクして、スクロール効果を維持するにはどうすればよいですか?

視差スクリプトとして 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、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 に答える