javascript 在页面加载时滚动到 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22453332/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
scroll to div on page load
提问by Kyle_Bridges
<!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.
试图滚动到页面加载。我的 js 函数似乎不起作用。我已经运行了 js 测试，看看我是否正确调用了 js 库，我就是这样。我做错了什么。任何帮助将不胜感激。
更新：我通过 W3c 验证器运行我的 HTML 并且它通过了。
回答by Paranoia
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
});
回答by Adween
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 scrollTopfunctions 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? try adding this to you head section before your script block
你加载jquery了吗？尝试将其添加到您的脚本块之前的头部部分
<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
通过查看您刚刚弹出的代码，我唯一能看到的是您的 css 链接没有完全关闭。尝试关闭它，看看是否有帮助。不是 100% 确定链接应该是什么，但它是这一行
<link href='http://fonts.googleapis.com/css?
回答by Virus721
Why not using a simple anchor ?
为什么不使用简单的锚点？
<div id="foo">
</div>
And
和
yourlink.html#foo
I think that works.
我认为这有效。
回答by ReeCube
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 标记中。
回答by prady00
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(...);//插件会处理这个
回答by Wilmer
Try with jQuery animate():
尝试使用 jQuery animate()：
$("html, body").animate({ scrollTop: $("#video").offset().top }, 800);
回答by user3036342
It should be:
它应该是：
$( document ).ready(function() {
$(document).scrollTop( $("#video").offset().top );
});
