0

7 ページの単一ページスクロール Web サイトがあり、各ページの高さは約 1000px です。私のメニュー構成は次のようになります。

<a href="#home" class="home">Home</a>
<a href="#about" class="about">About</a>
<a href="#team" class="team">Team</a>
<a href="#contact" class="contact">Contact</a>

リンクをクリックすると、セクションに割り当てられたそれぞれの ID にスクロールします。

また、上下に2つの矢印が付いた小さな位置固定ボタンもあります。 

<div class="button">
    <i class="go-up"></i> //up arrow
    <i class="go-down"></i> //down arrow
</div>

矢印をクリックして、最も近いセクションに移動したい。たとえば、私が の中にいると仮定すると#team、 をクリックする.go-upと に移動し、#about.go-down は に移動するはず#contactです。また、再びに移動した後、#contactこれは新しい最も近いターゲットを識別する必要があります。

jQueryでこれを行うのを手伝ってください。

4

3 に答える 3

2

次のようなマークアップがあると仮定します。

<a href="#home" class="home">Home</a>

<a href="#about" class="about">About</a>

<a href="#team" class="team">Team</a>
<a href="#contact" class="contact">Contact</a>

    <div>
        <div id="home">
            <p>Some content in 'home.'</p>
            <div class="button">
                <i class="go-up">&uarr;</i>
                <i class="go-down">&darr;</i></div>
        </div>
        <!-- other sections omitted for brevity -->
    </div>

私は提案します：

$('.button i').click(
    function(){
        var mvTo = $(this).closest('div[id]')[$(this).hasClass('go-up') ? 'prev' : 'next']().offset(),
            x = mvTo.left,
            y = mvTo.top;
        window.scrollTo(x,y);
    });

JSフィドルデモ。

参照：

于 2013-02-25T20:00:14.957 に答える
1

jQueryを使用して解決策を見つけるのに役立つと述べたので、ここに解決策があります：

上がるのは次のようなものです：

$('.button > .go-up').on("click",function(){
     var container = $("#mainPageContainer");
     var prevElement = container.prevAll('.aClassToPutOnPageContent:first');
     container.scrollTo(prevElement);
  });

ダウンする可能性があります：

 $('.button > .go-down').on("click",function(){
     var container = $("#mainPageContainer");
     var nextElement = container.nextAll('.aClassToPutOnPageContent:first');
     container.scrollTo(nextElement);
  });.

優れたコンテンツ コンテンツ スクロール プラグインについては、このリンクも参照してください。

出典 : jquery next() を使用してクラスごとに次の div を選択する方法

でも、次回はもう少し探してみてください！ソースを見つけるのに約20秒かかりました。(;

頑張って楽しんでね、

マーク。

于 2013-02-25T19:20:04.087 に答える
1

クラスフラグを使用します。

たとえば、リンクでクラスcurrentを使用します。

$('.button i').click(function () {
    var $anchor = $('.current');
    var direction = $(this).prop('class');

    if (direction == 'go-up' && $anchor.prev().length > 0) {
        $('a').removeClass("current");
        $anchor.prev().addClass("current");
        $('html, body').stop().animate({
            scrollTop: $($anchor.prev().attr('href')).offset().top
        }, 1500);
    } else if (direction == 'go-down' && $anchor.next().length > 0) {
        $('a').removeClass("current");
        $anchor.next().addClass("current");
        $('html, body').stop().animate({
            scrollTop: $($anchor.next().attr('href')).offset().top
        }, 1500);
    }

});

次に、を使用して現在のものを見つけることができます$('.current')

と使用.prev()して.next()

http://jsfiddle.net/PhckT/1

于 2013-02-25T19:56:56.450 に答える