jQuery：淡出和滾動

我創建了一個使用Bootstrap的網站。例如，。我們想賣椅子。現在我們想擴大，我們也想賣桌子。jQuery：淡出和滾動

我想切換整個內容，具體取決於客戶的選擇。

這是一個onepager網站。您可以看到整個內容從頂部滾動到底部。有幾個這樣的部分。

$('#contentfilter1').click(function(e) { 
 
    $('#content1').fadeOut('slow', 
 
    function() { 
 
     $('#content2').fadeIn(); 
 
    }); 
 
    $('#content1nav').fadeOut('slow', 
 
    function() { 
 
     $('#content2nav').fadeIn(); 
 
    }); 
 
    $.scrollTo('.sec3', 1000); 
 
    return false; 
 
}); 
 
$('#contentfilter2').click(function(e) { 
 
    $('#content2').fadeOut('slow', 
 
    function() { 
 
     $('#content1').fadeIn(); 
 
    }); 
 
    $('#content2nav').fadeOut('slow', 
 
    function() { 
 
     $('#content1nav').fadeIn(); 
 
    }); 
 

 
    $.scrollTo('.sec1', 1000); 
 
    return false; 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div id="start"> 
 
    <button class="btn" id="contentfilter2">Change to Content 1</button> 
 
    <button class="btn" id="contentfilter1">Change to Content 2</button> 
 
</div> 
 
<div id="content1"> 
 
    <section id="sec1" class="sec1"> 
 
    <p>This is section1</p> 
 
    </section> 
 

 
    <section id="sec2" class="sec2"> 
 
    <p>This is section2</p> 
 
    </section> 
 
</div> 
 

 
<div id="content2" style="display:none;"> 
 
    <section id="sec3" class="sec3"> 
 
    <p>This is section3</p> 
 
    </section> 
 

 
    <section id="sec4" class="sec4"> 
 
    <p>This is section4</p> 
 
    </section> 
 
</div> 
 
<footer> 
 
<p>Footer content</p> 
 
</footer>

當我點擊「更改爲內容2」內容1消失和內容2 apperears。精細。現在腳本應該滾動到第一部分的內容。在我的情況下，「第3節」。但腳本滾動到頁面的底部。腳本不停止。滾動條在底部。

當我滾動到選擇部分並再次單擊「更改爲內容2」時，網站會滾動到右側部分。必須有問題，第一次點擊後才能找到正確的部分。可見之後，它工作正常。

任何一個想法，我該如何解決這個問題？我必須分開腳本嗎？首先顯示新內容，然後滾動到內容的開始位置？

來源

2015-07-20 Ricky Spanish

你對這個問題的描述很不明確。請更好地描述它 –

讓我試試。我的英語不是最好的;）我給你舉個例子。我有一個網站。這是一個單獨的遊戲，你可以從頂部滾動到底部。一節又一節。創造和銷售椅子的全部知識。現在我們想分享我們關於創建其他傢俱的知識。我們不想展示椅子的東西。所以客戶可以選擇頂部。椅子或桌子。根據選擇，內容切換。腳本應該滾動到正確內容的開頭，但它會滾動到絕對末尾。當我再次點擊內容選擇按鈕時，它可以工作。 –

我想你只需要一個行添加到您的jQuery褪色發生後，像這樣：

$('#contentfilter2').click(function(e) { 
    $('#content2, #content2nav').fadeOut('slow',function() { 
    $('#content1, #content1nav').fadeIn(); 
    }); 
    $('html,body').animate({scrollTop:$('#content1').offset().top - 20}, 'slow'); 
    return false; 
});

這將頁面滾動到「內容1」部分的頂部。您可以選擇從.offset().top中省略「-20」部分，或者您可以製作您希望的任意數字 - 它基本上會在您想要的部分上方20個像素處，以適應任何導航元素或任何您想要的空間離開那裏。

祝你好運！

來源

2015-07-21 18:55:47 CreMedian

jQuery：淡出和滾動

回答

相關問題