第二jQuery「scrollTop」不起作用

嗯，我不能解決這個問題了。這是問題。第二jQuery「scrollTop」不起作用

我有scrollTop jquery頁面加載，延遲後滾動頁面下來供用戶採取行動。但在點擊「＃b3，＃b3b」按鈕後，我無法再使用另一個scrollTop工作，延遲後滾動到頁面底部。

它應該滾動到底部的.comp元素，但它不滾動或只是一點點滾動。

有人能告訴我怎麼才能讓頁面在點擊按鈕後第二次滾動到底部元素？

$(document).ready(function() { 
 
    $('html, body').delay(1500).animate({ 
 
     scrollTop: $('.button').offset().top 
 
    }, 'slow'); 
 
\t 
 
\t 
 

 
\t $("#b1,#b1b").click(function(){ 
 
\t \t $("#a1").fadeOut('fast'),$("#a2").fadeIn('slow'); 
 
\t }); 
 
\t $("#b2,#b2b").click(function(){ 
 
\t \t $("#a2").fadeOut('fast'),$("#a3").fadeIn('slow'); 
 
\t }); 
 
\t $("#b3,#b3b").click(function(){ 
 
\t \t $("#a3").fadeOut('fast'),$("#a4").fadeIn('slow'); 
 
\t \t 
 
\t $("#bar").width(0); 
 
\t \t $("#bar").delay(150).animate({width: '+=40%'},'slow').delay(1200).animate({width: '+=20%'},'slow').delay(1000).animate({width: '+=20%'},'slow').delay(2000).animate({width: '+=20%'},'slow'); 
 
\t 
 
\t 
 
\t 
 
\t 
 
\t $('html, body').delay(10000).animate({ 
 
\t \t scrollTop: $('.comp').offset().top 
 
\t }, 'slow'); 
 

 
\t 
 
\t 
 
\t 
 
\t $('#r1').show(500).delay(2000).hide(500); 
 
\t $('#r2').delay(2000).show(500).delay(2000).hide(500); 
 
\t $('#r3').delay(4500).show(500).delay(2000).hide(500); 
 
\t $('#r4').delay(7000).show(500); 
 
\t $('#r5').delay(8500).show(500); 
 
\t 
 
\t $('#rb1').delay(2000).show(500); 
 
\t $('#rb2').delay(4500).show(500); 
 
\t $('#rb3').delay(7500).show(500); 
 
\t 
 

 
\t }); 
 
\t 
 
\t 
 
});

* { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t border: 0; 
 
\t font-size: 100%; 
 
\t font: inherit; 
 
\t vertical-align: baseline; 
 
} 
 
p,h1,h2,h3,h4,h5{ 
 
\t padding-bottom: 1em; 
 
} 
 
body { 
 
\t background-color: #000; 
 
\t color: #FFF; 
 
} 
 
img { 
 
\t margin: 0px; 
 
\t padding: 0px; 
 
\t display: block; 
 
} 
 
#wrap { 
 
\t max-width: 1000px; 
 
\t margin: 10px; 
 
\t border: 1px solid #333; 
 
\t background-color: #292929; 
 
\t padding: 10px; 
 
\t border-radius: 8px; 
 
\t -moz-border-radius: 8px; 
 
\t -webkit-border-radius: 8px; 
 
} 
 
#header { 
 
\t font-family: Roboto, Helvetica, Arial, sans-serif; 
 
\t font-size: 1.6em; 
 
\t text-align: center; 
 
} 
 
#content { 
 
} 
 
#graphic { 
 
} 
 
#graphic img { 
 
\t width: 90%; 
 
\t height: auto; 
 
\t max-width: 400px; 
 
\t display: block; 
 
\t margin: auto; 
 
\t padding: 5px; 
 
\t border: 1px solid #525252; 
 
\t background-color: #3C3C3C; 
 
} 
 
#text { 
 
\t margin-top: 15px; 
 
} 
 
#text p { 
 
\t font-family: Arial, Helvetica, sans-serif; 
 
\t font-size: 0.9em; 
 
\t text-align: center; 
 
\t line-height: 1.2em; 
 
} 
 
#javascript_countdown_time { 
 
\t font-weight: bold; 
 
\t color: #F60; 
 
} 
 
.actionbox { 
 
\t border-top-width: 1px; 
 
\t border-right-width: 0px; 
 
\t border-bottom-width: 0px; 
 
\t border-left-width: 0px; 
 
\t border-top-style: solid; 
 
\t border-right-style: solid; 
 
\t border-bottom-style: solid; 
 
\t border-left-style: solid; 
 
\t border-top-color: #999; 
 
\t border-right-color: #999; 
 
\t border-bottom-color: #999; 
 
\t border-left-color: #999; 
 
\t padding-top: 20px; 
 
} 
 
.actionbox h2 { 
 
\t clear: both; 
 
\t display: block; 
 
\t font-family: Roboto, Helvetica, Arial, sans-serif; 
 
\t font-size: 1.3em; 
 
\t font-weight: 300; 
 
\t line-height: 1.1em; 
 
} 
 
.actionbox h2 strong { 
 
\t font-weight: bold; 
 
} 
 
.actionbox h3 { 
 
\t font-family: Helvetica, Roboto, Tahoma, sans-serif; 
 
\t font-weight: bold; 
 
\t font-size: 1em; 
 
\t color: #F90; 
 
} 
 
.actionbox h4 { 
 
\t text-align: center; 
 
\t font-size: 1em; 
 
\t font-weight: bold; 
 
\t font-family: Arial, Helvetica, sans-serif; 
 
\t padding-top: 30px; 
 
} 
 
.actionbox ul { 
 
\t margin-left: 10px; 
 
\t margin-top: 20px; 
 
} 
 
.actionbox ul li{ 
 
\t background-repeat: no-repeat; 
 
\t list-style-type: none; 
 
\t padding-left: 30px; 
 
\t background-size: 20px; 
 
\t padding-bottom: 1em; 
 
\t background-position: left top; 
 
\t padding-top: 3px; 
 
\t font-family: Arial, Helvetica, sans-serif; 
 
\t font-size: 0.9em; 
 
} 
 
.actionbox ol { 
 
\t margin-left: 30px; 
 
} 
 
.actionbox ol li { 
 
\t padding-bottom: 1em; 
 
\t font-family: Roboto, Helvetica, Arial, sans-serif; 
 
\t font-size: 0.9em; 
 
} 
 
.butbox { 
 
\t display: table; 
 
\t width: 100%; 
 
\t table-layout: fixed; 
 
} 
 
.butbox .button, .butbox .buttonr { 
 
\t display: table-cell; 
 
} 
 
.button a{ 
 
\t text-decoration: none; 
 
\t text-shadow: 1px 1px 0 rgba(0,0,0,0.3); 
 
\t background-color: #00CB00; 
 
\t background-image: -webkit-gradient(linear, left top, left bottom, from(#00CB00), to(#009A00)); 
 
\t background-image: -webkit-linear-gradient(top, #00CB00, #009A00); 
 
\t background-image: -moz-linear-gradient(top, #00CB00, #009A00); 
 
\t background-image: -ms-linear-gradient(top, #00CB00, #009A00); 
 
\t background-image: -o-linear-gradient(top, #00CB00, #009A00); 
 
\t background-image: linear-gradient(to bottom, #00CB00, #009A00); 
 
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#00CB00, endColorstr=#009A00); 
 
\t display: block; 
 
\t border-top-style: solid; 
 
\t border-right-style: solid; 
 
\t border-bottom-style: solid; 
 
\t border-left-style: solid; 
 
\t border-top-width: 0px; 
 
\t border-right-width: 2px; 
 
\t border-bottom-width: 0px; 
 
\t border-left-width: 0px; 
 
\t border-top-color: #292929; 
 
\t border-right-color: #292929; 
 
\t border-bottom-color: #292929; 
 
\t border-left-color: #292929; 
 
\t -webkit-border-top-left-radius:5px; 
 
\t -moz-border-radius-topleft:5px; 
 
\t border-top-left-radius:5px; 
 
\t -webkit-border-top-right-radius:0px; 
 
\t -moz-border-radius-topright:0px; 
 
\t border-top-right-radius:0px; 
 
\t -webkit-border-bottom-right-radius:0px; 
 
\t -moz-border-radius-bottomright:0px; 
 
\t border-bottom-right-radius:0px; 
 
\t -webkit-border-bottom-left-radius:5px; 
 
\t -moz-border-radius-bottomleft:5px; 
 
\t border-bottom-left-radius:5px; 
 
} 
 
.button a:hover { 
 
background-color: #009800; background-image: -webkit-gradient(linear, left top, left bottom, from(#009800), to(#006700)); 
 
background-image: -webkit-linear-gradient(top, #009800, #006700); 
 
background-image: -moz-linear-gradient(top, #009800, #006700); 
 
background-image: -ms-linear-gradient(top, #009800, #006700); 
 
background-image: -o-linear-gradient(top, #009800, #006700); 
 
background-image: linear-gradient(to bottom, #009800, #006700);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#009800, endColorstr=#006700); 
 
} 
 
.buttonr a { 
 
\t text-decoration: none; 
 
\t text-shadow: 1px 1px 0 rgba(0,0,0,0.3); 
 
\t background-color: #CC0000; 
 
\t background-image: -webkit-gradient(linear, left top, left bottom, from(#CC0000), to(#9b0000)); 
 
\t background-image: -webkit-linear-gradient(top, #CC0000, #9b0000); 
 
\t background-image: -moz-linear-gradient(top, #CC0000, #9b0000); 
 
\t background-image: -ms-linear-gradient(top, #CC0000, #9b0000); 
 
\t background-image: -o-linear-gradient(top, #CC0000, #9b0000); 
 
\t background-image: linear-gradient(to bottom, #CC0000, #9b0000); 
 
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#CC0000, endColorstr=#9b0000); 
 
\t border-top-width: 0px; 
 
\t border-right-width: 0px; 
 
\t border-bottom-width: 0px; 
 
\t border-left-width: 2px; 
 
\t border-top-style: solid; 
 
\t border-right-style: solid; 
 
\t border-bottom-style: solid; 
 
\t border-left-style: solid; 
 
\t border-top-color: #292929; 
 
\t border-right-color: #292929; 
 
\t border-bottom-color: #292929; 
 
\t border-left-color: #292929; 
 
\t display: block; 
 
\t -webkit-border-top-left-radius:0px; 
 
\t -moz-border-radius-topleft:0px; 
 
\t border-top-left-radius:0px; 
 
\t -webkit-border-top-right-radius:5px; 
 
\t -moz-border-radius-topright:5px; 
 
\t border-top-right-radius:5px; 
 
\t -webkit-border-bottom-right-radius:5px; 
 
\t -moz-border-radius-bottomright:5px; 
 
\t border-bottom-right-radius:5px; 
 
\t -webkit-border-bottom-left-radius:0px; 
 
\t -moz-border-radius-bottomleft:0px; 
 
\t border-bottom-left-radius:0px; 
 
} 
 
.buttonr a:hover{ 
 
background-color: #990000; background-image: -webkit-gradient(linear, left top, left bottom, from(#990000), to(#680000)); 
 
background-image: -webkit-linear-gradient(top, #990000, #680000); 
 
background-image: -moz-linear-gradient(top, #990000, #680000); 
 
background-image: -ms-linear-gradient(top, #990000, #680000); 
 
background-image: -o-linear-gradient(top, #990000, #680000); 
 
background-image: linear-gradient(to bottom, #990000, #680000);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#990000, endColorstr=#680000); 
 
} 
 
.buttxt a{ 
 
\t text-align: center; 
 
\t padding: 5px; 
 
\t font-family: Roboto, Helvetica, Arial, sans-serif; 
 
\t font-size: 2em; 
 
\t text-decoration: none; 
 
\t color: #FFF; 
 
} 
 
.buttonlast a { 
 
\t text-decoration: none; 
 
\t text-shadow: 1px 1px 0 rgba(0,0,0,0.3); 
 
\t background-color: #00CB00; 
 
\t background-image: -webkit-gradient(linear, left top, left bottom, from(#00CB00), to(#009A00)); 
 
\t background-image: -webkit-linear-gradient(top, #00CB00, #009A00); 
 
\t background-image: -moz-linear-gradient(top, #00CB00, #009A00); 
 
\t background-image: -ms-linear-gradient(top, #00CB00, #009A00); 
 
\t background-image: -o-linear-gradient(top, #00CB00, #009A00); 
 
\t background-image: linear-gradient(to bottom, #00CB00, #009A00); 
 
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#00CB00, endColorstr=#009A00); 
 
\t display: block; 
 
\t border-top-style: solid; 
 
\t border-right-style: solid; 
 
\t border-bottom-style: solid; 
 
\t border-left-style: solid; 
 
\t border-top-width: 0px; 
 
\t border-right-width: 2px; 
 
\t border-bottom-width: 0px; 
 
\t border-left-width: 0px; 
 
\t border-top-color: #292929; 
 
\t border-right-color: #292929; 
 
\t border-bottom-color: #292929; 
 
\t border-left-color: #292929; 
 
\t border-radius: 5px; 
 
\t -moz-border-radius: 5px; 
 
\t -webkit-border-radius: 5px; 
 
\t margin-top: 10px; 
 
} 
 
.buttonlast a:hover { 
 
\t background-color: #009800; 
 
\t background-image: -webkit-gradient(linear, left top, left bottom, from(#009800), to(#006700)); 
 
\t background-image: -webkit-linear-gradient(top, #009800, #006700); 
 
\t background-image: -moz-linear-gradient(top, #009800, #006700); 
 
\t background-image: -ms-linear-gradient(top, #009800, #006700); 
 
\t background-image: -o-linear-gradient(top, #009800, #006700); 
 
\t background-image: linear-gradient(to bottom, #009800, #006700); 
 
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#009800, endColorstr=#006700);} 
 
.comp { 
 
\t padding-top: 20px; 
 
\t padding-bottom: 20px; 
 
\t font-family: Arial, Helvetica, sans-serif; 
 
\t font-size: 0.7em; 
 
\t text-align: center; 
 
} 
 
#bar { 
 
\t background-color: #3C0; 
 
\t border-top-style: none; 
 
\t border-right-style: none; 
 
\t border-bottom-style: none; 
 
\t border-left-style: none; 
 
\t height: 30px; 
 
\t width: 100%; 
 
\t margin-bottom: 15px; 
 
} 
 
#percentage { 
 
\t font-family: Arial, Helvetica, sans-serif; 
 
\t font-size: 0.9em; 
 
\t text-align: center; 
 
\t line-height: 30px; 
 
} 
 
.orange { 
 
\t color: #F60; 
 
} 
 
#a2,#a3,#a4,#rb1,#r2,#rb2,#r3,#rb3,#r4,#r5 { 
 
\t display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrap"> 
 
    <div id="header"><h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. </h1> 
 
    </div> 
 
    <div id="content"> 
 
    <div id="graphic"><img src="#" alt="" height="500px" width="300px"></div> 
 
    <div id="text"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec.</p> 
 
     
 
     <div class="actionbox" id="a3" style="display:block"> 
 
       <h2><strong>Question 3:</strong></h2> 
 
       <div class="butbox"> 
 
        <div class="button buttxt" id="b3"><a href="#/">YES</a></div> 
 
        <div class="buttonr buttxt" id="b3b"><a href="#/">NO</a></div> 
 
      \t </div> 
 
    \t </div> 
 
     <div class="actionbox" id="a4"> 
 
     <div id="bar"><div id="percentage"></div></div> 
 
       <h3 id="r1">step1...</h3> 
 
       <h3 id="r2">step2...</h3> 
 
       <h3 id="r3">step3...</h3> 
 
       <h3 id="r4">step4...</h3> 
 

 
       <ul> 
 
       \t <li id="rb1">xxx</li> 
 
       <li id="rb2">xxx</li> 
 
       <li id="rb3">xxx</li> 
 
       </ul> 
 

 
       <div id="r5" class="congrats"> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec. 
 
       <div class="buttonlast buttxt"><a href="#/">I AGREE</a></div> 
 
       <div class="comp">xxxx</div> 
 
       </div> 
 
</div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-05-23 reizer

，而不是試圖拖延在絕對時間的動畫，你可以讓他們彼此相對的當另一個動畫結束時執行的在其中嵌套函數。這樣，您也可以相對確定，當正確的時間到達時（我認爲是您的問題），要滾動的元素將不隱藏。

參見this fiddle。

我拙劣的時代，但它應該給你一個想法。更改後的代碼現在看起來是這樣的：

$("#b3,#b3b").click(function(){ 
    $("#a3").fadeOut('fast'),$("#a4").fadeIn('slow'); 

    $("#bar").width(0); 
    $('#r1').show(500); 
    $("#bar").delay(150).animate({width: '+=40%'},2000, function() { 
    $('#r1').hide(500); 
    $('#r2').show(500); 
    $('#rb1').show(500); 
    $("#bar").animate({width: '+=20%'},2000, function() { 
     $('#r2').hide(500); 
     $('#r3').show(500); 
     $('#rb2').show(500); 
     $("#bar").animate({width: '+=20%'},2000, function() { 
     $('#r3').hide(500); 
     $('#r4').show(500); 
     $('#rb3').show(500); 
     $("#bar").animate({width: '+=20%'},2000, function() { 
      $('#r4').show(500); 
      $("#r5").show(); // show the element before you scroll to its child 
      $('html, body').animate({ 
      scrollTop: $('.comp').offset().top 
      }, 'slow'); 
     }); 
     }); 
    }); 
    }); 
});

來源

2016-05-23 21:48:23

哇感謝名單了很多馬克斯，我正在學習jQuery的不知道的語法非常好，所以只是去與基礎知識，但是這似乎是一路在未來。感謝您的幫助！ – reizer

不客氣。對於像jQuery這樣的東西，至少對我來說，當看到一個如何解決特定問題而不是僅僅閱讀文檔的實際例子時，最容易學會。：-）很高興我能幫上忙。 –

第二jQuery「scrollTop」不起作用

回答

相關問題