2016-07-29 73 views
1

我有一個自動滾動功能,有一個靜態箭頭可以讓用戶滾動到頁面的下一部分。當用戶到達「聯繫」部分(最後一頁)時,我希望箭頭隱藏,因爲沒有其他頁面可以向下滾動。當底部頁面部分到達時,jquery隱藏帶錨文本的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

做的:

獲取你的jQuery的頂部,要手動在HTML你的下一個部分的功能結合,改變以擺脫的jQuery的onclick綁定功能的你在控制檯上打印$($ anchor.attr('href'))的值來檢查執行是否進入'if'塊?如果是的話$($ anchor.attr('href'))的值是多少?去做。因爲很可能,您的執行不會進入'if'塊並執行'else'塊。在else塊中添加一條語句,如console.log(「else block」),以查看它是否進入if塊或else塊。 –

+0

你應該在'if($($ anchor.attr('href'))=='contact')'' – Poonam

+0

mm'這樣的括號裏使用'if'的條件,如果我把它放在奇怪的位置 - if($($ anchor.attr ('href'))==「contact」){ $(「a.page-scroll」)。hide(); } } 它仍然無法正常工作......我應該把它放在下一個函數或第一個函數 – user1673498

回答

2

通過你使用鏈接的外觀作爲下一個選擇器的ID,所以你應該在你的if中使用#contact

而且,你已經關閉了,如果支架)放錯了地方

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

如果要比較它的目標div的ID,那麼你需要做這樣的事情:

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

但是這看起來像額外的處理,以獲得相同的結果

更新

考慮到你所有的編輯 - 他們沒有真正有用,因爲他們沒有創建一個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