CODEWITHSUNDEEP
javascriptjqueryhtml
Kyle_Bridges
Kyle_Bridges

Reputation: 35

scroll to div on page load

                 <!DOCTYPE html>
                    <html class="no-js" lang="en">
                    <head>
        <meta charset="utf-8">
        <title>Woodry</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href='http://fonts.googleapis.com/css?                    
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/responsive.css">
        <script   src="//ajax.googleapis.com/ajax/libs/jquery
                    /1.11.0/jquery.min.js" ></script>

    <script type="text/javascript">
            $(function() {
            $(document).scrollTop( $("#video").offset().top );  
             });
            </script>
            </head>
            <body class="wrapper">
        <div id="top">
            <img src="img/top.png">
     </div>
        <div id="video" class="video">
        <div id="deer"><img class="deer" src="img/deerb.png"></div>
        <video autoplay loop class="fillWidth">
        <source src="video/dust.mp4" type="video/mp4"/>
            </video>
    </div>
    <div id="main" class="main">
        <img src="img/bottom.png">

        <div id="home"></div>
        <div id="shop"></div>
        <div id="contact"></div>
        </div>
             </body>
        </html>

Trying to scroll to the on page load. The js function that I have doesnt seem to work. I have ran js tests to see if I am calling the js library correctly, which I am. Im doing something wrong. any help would be greatly appreciated.
UPDATED: I ran my HTML through the W3c validator and it passed.

Upvotes: 3

Views: 25056

Answers (7)

Paranoia
Paranoia

Reputation: 2070

You're trying to scroll to a div, but your js code is looking for an id, so it should be 

id="video"

This should work then.

Edit: Just checked the code, I used this:

$(function() { 
 $('html, body').animate({
    scrollTop: $('#video').offset().top}, 1000);
});

This works for me. Your bottom image is 18MB (which is big), so you might want to try to wait until the page (and not the DOM) has loaded with:

$(window).load(function() {
// code here
});

Upvotes: 10

Virus721
Virus721

Reputation: 8315

Why not using a simple anchor ?

<div id="foo">
</div>

And

yourlink.html#foo

I think that works.

Upvotes: 1

Adween
Adween

Reputation: 2820

It sounds like you have issues elsewhere in your code.

Here is a fiddle that has what you currently have working http://jsfiddle.net/A5uyX/

$(function() { 
    $(document).scrollTop( $("#video").offset().top );
});

I would look at any other scrollTop functions or if you have a hash value in your url that is pointing somewhere else on the page maybe.

Have you loaded jquery? try adding this to you head section before your script block

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

EDIT

from looking at the code you have just popped on the only thing i can see is that you have a css link not fully closed. try closing it and see if that helps. not 100% sure what the link should be but it is this line

<link href='http://fonts.googleapis.com/css?

Upvotes: 2

user2571870
user2571870

Reputation:

Try with jQuery animate():

$("html, body").animate({ scrollTop: $("#video").offset().top }, 800);

Upvotes: 0

prady00
prady00

Reputation: 741

Plugin :smooth scrolling, you can find it here:

http://plugins.jquery.com/project/ScrollTo

From Docs:

$.scrollTo(...);//the plugin will take care of this

Upvotes: 0

user3036342
user3036342

Reputation: 1045

It should be:

$( document ).ready(function() {
  $(document).scrollTop( $("#video").offset().top );
});

Upvotes: -1

ReeCube
ReeCube

Reputation: 2587

Try this:

<script type="text/javascript">
    $(document).ready(function() {
        $(document).scrollTop( $("#video").offset().top );  
    });
</script>

And add the attribute id="video" to your html tag if you didn't already.

Upvotes: 1

Related Questions