在页面加载时滚动到 div
[英]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.我的 js 函数似乎不起作用。 I have ran js tests to see if I am calling the js library correctly, which I am.我已经运行了 js 测试，看看我是否正确调用了 js 库，我就是这样。 Im doing something wrong.我做错了什么。 any help would be greatly appreciated.任何帮助将不胜感激。
UPDATED: I ran my HTML through the W3c validator and it passed.更新：我通过 W3c 验证器运行我的 HTML 并且它通过了。
7 个解决方案
解决方案1
10 已采纳 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您正在尝试滚动到一个 div，但您的 js 代码正在寻找一个id ，所以它应该是
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:您的底部图像是 18MB（很大），因此您可能想尝试等到页面（而不是DOM ）加载了以下内容：
$(window).load(function() {
// code here
});
解决方案2
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/这是一个小提琴，其中包含您当前的工作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.我会查看任何其他scrollTop函数，或者您的 url 中是否有一个哈希值指向页面上的其他地方。
Have you loaded jquery?你加载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.通过查看您刚刚弹出的代码，我唯一能看到的是您的 css 链接没有完全关闭。 try closing it and see if that helps.尝试关闭它，看看是否有帮助。 not 100% sure what the link should be but it is this line不是 100% 确定链接应该是什么，但它是这一行
<link href='http://fonts.googleapis.com/css?
解决方案3
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.如果您还没有，请将属性id="video"到您的 html 标记中。
解决方案4
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.我认为这有效。
解决方案5
0 2014-03-17 11:43:43
Plugin :smooth scrolling, you can find it here:插件：平滑滚动，你可以在这里找到它：
http://plugins.jquery.com/project/ScrollTo http://plugins.jquery.com/project/ScrollTo
From Docs:从文档：
$.scrollTo(...);//the plugin will take care of this $.scrollTo(...);//插件会处理这个
解决方案6
0 2014-03-17 11:46:16
尝试使用 jQuery animate()：
$("html, body").animate({ scrollTop: $("#video").offset().top }, 800);
解决方案7
-1 2014-03-17 11:42:04
It should be:它应该是：
$( document ).ready(function() {
$(document).scrollTop( $("#video").offset().top );
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.