Landing page with delay then auto scrolls downwards

Question

I'm new to jquery/javascript and have came across an issue.

I have a landing page that displays a large logo. I am wanting a 3 second pause/delay before the automated scroll takes effect.

the code I am using at the moment is-

JS

$('html, body').animate({scrollTop: $('#hello').offset().top}, 4000);

HTML

<div class="fillwindow" style="background-image:url('#')">
    <div  class="landing__logo">
        <img  class="landing__logo-img" src="#">
    </div>
</div>

<div class="fillwindow" id="hello" style="background-image:url('#')">
    <div class="nav-header">
        <a href="<?php home_url(); ?>portfolio" class="nav-btn js-navBtn">PORTFOLIO</a>
    </div>
    <a href="<?php home_url(); ?>portfolio"><div class="nav-hitstate"></div></a>
</div>

Like this? `$('html, body').animate({scrollTop: $('#hello').offset().top },4000);` — sideroxylon, May 06 '15 at 08:00
@sideroxylon thank you for your help. I'm only new to this syntax. Would you be able to assist me in applying a delay/pause to that function? Thanks, J — Jargonaut_, May 06 '15 at 23:46
`$(document).ready(function() {setTimeout(function() {$('html, body').animate({scrollTop: $('#hello').offset().top },4000);}2000);})` — sideroxylon, May 07 '15 at 00:36
@sideroxylon, thanks for the quick reply. However, that doesn't seem to work for me ? `jQuery(document).ready(function($){ setTimeout(function() { $('html, body').animate( {scrollTop: $('#hello').offset().top }, 4000);} 2000);})` — Jargonaut_, May 07 '15 at 01:13
Oops - missed a comma: `$(document).ready(function() {setTimeout(function() {$('html, body').animate({scrollTop: $('#hello').offset().top },4000);}, 2000);})` If that doesn't work, check your console for error messages. — sideroxylon, May 07 '15 at 01:49
Legend! Thank you, greatly appreciated. As I mentioned above I am very new to this syntax. One last thing.. with the `$(document).ready(function()` piece of code, do you only specify that once up the top of the .js file or are you able to repeat it? @sideroxylon — Jargonaut_, May 07 '15 at 02:22
You can wrap your entire code in it (if that's what you want/need), or you can repeat it. It all depends when you want code to run/be active. All the best. — sideroxylon, May 07 '15 at 04:27
@sideroxylon - You can now add your comment as an answer. I reopened the question since the supposed duplicate question doesn't answer this question, but your comment does. — gilly3, Oct 13 '15 at 20:26
@gilly3 Just curious about your decision to edit out the `html` tag. The removal of the tag would seem to suggest to me that the question is about using JavaScript on a platform other than HTML in a web browser. — Maximillian Laumeister, Oct 13 '15 at 20:30
@MaximillianLaumeister - It was previously closed as duplicate by a user with an html gold badge, but the question really has nothing to do with html. The supposed duplicate was about how to scroll a page with jQuery, but this question already demonstrates that scrolling is working. Rather it's asking how to delay the scrolling, which has nothing to do with html. I see the point you are making, but I'd argue that the html tag is not the correct way to specify browser-javascript vs node (or wscript/cscript). Besides, the correct answer (use `setTimeout`) is valid for browsers and node. — gilly3, Oct 13 '15 at 20:37

score 1 · Accepted Answer · answered Oct 13 '15 at 22:15

1

As per the comments above:

$(document).ready(function() {
 setTimeout(function() {
   ('html, body').animate({scrollTop: $('#hello').offset().top },4000);
 }, 2000);})

answered Oct 13 '15 at 22:15

sideroxylon

3,977
1
18
33

Haha, you beat me to it @sideroxylon – Jargonaut_ Oct 13 '15 at 22:21

score 0 · Answer 2 · answered Oct 13 '15 at 22:20

A big thanks to - Sideroxylon for the help. His advice was the correct answer I was looking for.

$(document).ready(function() {
  setTimeout(function() {
      $('html, body').animate({
         scrollTop: $('#hello').offset().top 
      },4000);
  }, 2000);
});

Landing page with delay then auto scrolls downwards

2 Answers2