2016-07-29 4 views
1

私はオートスクロール機能を持​​っています。ユーザーがページの次のセクションにスクロールできるようにする静的な矢印があります。ユーザーが「連絡先」セクション(最後のページ)に到達すると、下にスクロールする他のページがないので、矢印を非表示にします。下のページセクションに達すると、Jquery hideアンカーテキストのdiv

アップデート -

最後のページで現在のナビゲーション矢印。消えるが、それはあまりにも程度とイントロセクションに。消える..私は

のjQuery修正することができますどのように - 更新V3を

$(function() { 

$('a.page-scroll').bind('click', function(event) { 
    var $anchor = $(this); 
    $('html, body').stop().animate({ 
     scrollTop: $($anchor.attr('href')).offset().top 
    }, 1500, 'easeInOutExpo'); 


    event.preventDefault(); 


    }); 


}); 


function nextSection() 
{ 

var scrollPos = $(document).scrollTop(); 
$('#section-navigator a').each(function() { 
    var currLink = $(this); 
    var refElement = $(currLink.attr("href")); 

    if (refElement.position().top > scrollPos) { 
       var $anchor = $(this); 
    $('html, body').stop().animate({ 
     scrollTop: $($anchor.attr('href')).offset().top 
    }, 1500, 'easeInOutExpo'); 

    event.preventDefault(); 
     location.hash = ""; 
     location.hash = currLink.attr("href"); 

     if ($($anchor.attr('href')).attr('id') == "contact") { 
$("div.page-scroll").hide(); 
    } 

     return false; 


     } 


    }); 
} 

HTML

<div class="page-scroll"> 
    <img class="arrow-down page-scroll-btn" src="img/arrow_dark.png" onclick="nextSection()" /> 
</div> 

ありがとう!

+0

んでした:

は手動でHTMLに結合されているように変更あなたの次のセクションの機能は、お使いのjQueryの上部にあることjqueryのonclickの結合機能を取り除きますあなたはコンソール上に$($ anchor.attr( 'href'))の値を表示して、実行が 'if'ブロックに入っているかどうかをチェックしますか?そして、それが$($ anchor.attr( 'href'))の値なら何ですか?それを行う。おそらく、あなたの実行は 'if'ブロックに入っておらず、 'else'ブロックを実行していないためです。 elseブロック内にconsole.log( "else block")のような文を追加して、ifブロックかelseブロックに入るかどうかを確認します。 –

+0

'if($ anchor.attr( 'href'))==" contact "のように角括弧の中に' if'の条件を使うべきです) ' – Poonam

+0

mmもし私が置いたら変だ - if($($ anchor.attr ( 'href'))== "contact"){ $( "a.page-scroll")。hide(); } これはまだ機能しません。次の関数または最初の関数の中に入れてください。 – user1673498

答えて

2

次のセレクタのIDとしてリンクを使用するので、ifで#contactを使用する必要があります。

if ($($anchor.attr('href')).attr('id') == "contact") { 
    $("div.page-scroll").hide(); 
} 

また、あなたは、ターゲットのdiv IDにそれを比較したい場合は、あなたがこのような何かをする必要があり、間違った場所

if ($anchor.attr('href') == "#contact") { 
} 

であればブラケット)を閉じました

しかし、これはアップデート同じ結果に

を取得するために余分な処理のように思われる

MCVEを作成しないので、あなたの編集内容は本当に役に立ちません。元の質問からさらに遠く離れているようです。私は、次の操作を行います:

function nextSection() { 

    var currentPos = $(document).scrollTop(); 

    $('#section-navigator a').each(function() { 
    var currLinkHash = $(this).attr("href"); 
    var refElement = $(currLinkHash); 

    if (refElement.offset().top > scrollPos) { // change this to offset 

     $('html, body').stop().animate({ 
     scrollTop: refElement.offset().top // just use refElement 
     }, 1500, 'easeInOutExpo'); 

     location.hash = ""; 
     location.hash = currLinkHash; 

     if (refElement.attr('id') == "contact") { // hide the scroller if the id is contact 
     $("div.page-scroll").hide(); 
     } 

     return false; 
    } 
    }); 
} 
+0

:(これはまだ動作していません – user1673498

+0

@ user1673498申し訳ありませんが、編集を参照してください、そこに余分な '$'を持っていた – Pete

+0

まだ何も...私のコードのおかげで更新されます – user1673498

関連する問題