第二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”不起作用

回答

相关问题