scroll to div on page load
Question
<!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.
7 answers
solution1
10 ACCPTED 2014-03-17 11:40:53
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
});
solution2
2 2014-03-17 12:00:16
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?
solution3
1 2014-03-17 11:41:12
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.
solution4
1 2014-03-18 09:11:18
Why not using a simple anchor ?
<div id="foo">
</div>
And
yourlink.html#foo
I think that works.
solution5
0 2014-03-17 11:43:43
Plugin :smooth scrolling, you can find it here:
http://plugins.jquery.com/project/ScrollTo
From Docs:
$.scrollTo(...);//the plugin will take care of this
solution6
0 2014-03-17 11:46:16
尝试使用 jQuery animate()：
$("html, body").animate({ scrollTop: $("#video").offset().top }, 800);
solution7
-1 2014-03-17 11:42:04
It should be:
$( document ).ready(function() {
$(document).scrollTop( $("#video").offset().top );
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.