1

jQuery scrollTo を使用してセクション間を移動するマルチセクション スプラッシュ ページを作成しています。scrollTo の「オフセット」設定が考慮される固定ヘッダーがありますが、ユーザーがサイトの他のページから特定のセクション (スプラッシュ ページのアンカー) に移動できるようにしたいと考えています。

現状では、これが発生したときにオフセットは考慮されていません...セクションと #page および body 要素の両方にマージンを追加しようとしましたが、いくつかの相対的な位置をあちこちに追加しようとしましたが、セクションは常にブラウザ ウィンドウの上部。

私が気に入っているのは、他のページからのリンクでオフセットを考慮に入れるか、それらのリンクでユーザーをスプラッシュページの上部に移動させてから、目的のアンカーまでスクロールダウンさせる方法です。

js:

    //menu scrolling

    jQuery('#menu-primary').localScroll({
        easing: 'easeInOutQuint',
        duration: 1200,
        offset: -63,
        hash: true
    }); // end scroll


    // active states for menu items
    $(function(){
        var sections = {},
            _height  = $(window).height(),
            i        = 0;

        $('.section').each(function(){
            sections[this.name] = $(this).offset().top;
        });

        $(document).scroll(function(){
            var $this = $(this),
                pos   = $this.scrollTop();

            for(i in sections){
                if(sections[i] > pos && sections[i] < pos + _height){
                    $('li').removeClass('active');
                    $('.nav-' + i).addClass('active');
                }  
            }
        });
    });

html:

<div class="menu-primary-container">
   <ul id="menu-primary" class="menu">
       <li id="menu-item-21" class="nav-section1 active"><a href="/#section1">Home</a></li>
       <li id="menu-item-13" class="nav-section2"><a href="/#section2">two</a></li>
       <li id="menu-item-12" class="nav-section3"><a href="/#section3">three</a></li>
       <li id="menu-item-14" class="nav-section4"><a href="/#section4">four</a></li>
       <li id="menu-item-19"><a href="http://galvanizingequity.com/?page_id=17">other page</a></li>
   </ul>
</div>

    <div id="scrollwrap">
    <div class="scrollbox one">
        <a name="section1" class="section"></a>
        <h2>Apples</h2>
    </div>
    <div class="scrollbox two">
        <a name="section2" class="section"></a>
        <h2>Bananas</h2>
    </div>
    <div class="scrollbox three">
        <a name="section3" class="section"></a>
        <h2>Toast</h2>
    </div>
    <div class="scrollbox four">
        <a name="section4" class="section"></a>
        <h2>Papaya</h2>
    </div>
    </div><!--scrollwrap-->

(これは、メニューのカスタム コーディングに関する限り、余分な障害を追加するワードプレス サイトです。)

入力をお待ちしております。ありがとう！

4

1 に答える 1

1

jquery をセットアップして、ページが読み込まれる/準備ができたら を入力しscrollTop(0)、次を使用して JavaScript でハッシュを取得することができwindow.location.hashます。animate({scrollTop,$('a.'+hashvaluehere).offset().top},1000);

それがあなたが求めていたものかどうかはわかりませんが、私は質問を理解したと思いますか?

于 2012-06-30T21:48:07.420 に答える