CODEWITHSUNDEEP
javascripthtml
djblois
djblois

Reputation: 805

Javascript run after 3 seconds

I have a collapsible div in my project that once the user clicks on it and it expands, I need it the computer to scroll down so the user knows the text is there. The expansion of the div works but since it tries to expand automatically (before the div expands) and because this is the bottom of the page (prior to the Div opening) it will not scroll. So what I want to do is put in a 3 second delay in to my Javascript so it will not try to do that until the Div is open. I cannot get it to work. This is the code I currently have:

<script language="Javascript">


     function scrollRefund() {
         var divPosition = $('#refund').offset();

         setTimeout(function(){
             $('html, body').animate({ scrollTop: divPosition.top }, "slow");
         }, 1);
     }
</script>

<button type="button" class="btn-link" data-toggle="collapse" data-target="#refund" onclick="javascript: scrollRefund();">Refund Policy</button>

<div id="refund" class="collapse">

Upvotes: 0

Views: 1092

Answers (2)

solimanware
solimanware

Reputation: 3051

Try to use 

setTimeout(function(){
             $('html, body').animate({ scrollTop: divPosition.top }, "slow");
         }, 3000);

Upvotes: 0

IrkenInvader
IrkenInvader

Reputation: 4050

The second argument for setTimeout is in milliseconds. Try 3000 instead of 1.

<script language="Javascript">


     function scrollRefund() {
         var divPosition = $('#refund').offset();

         setTimeout(function(){
             $('html, body').animate({ scrollTop: divPosition.top }, "slow");
         }, 3000);
     }
</script>

<button type="button" class="btn-link" data-toggle="collapse" data-target="#refund" onclick="javascript: scrollRefund();">Refund Policy</button>

<div id="refund" class="collapse">

Upvotes: 4

Related Questions