在页面加载时滚动到 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>
试图滚动到页面加载。 我的 js 函数似乎不起作用。 我已经运行了 js 测试，看看我是否正确调用了 js 库，我就是这样。 我做错了什么。 任何帮助将不胜感激。
更新：我通过 W3c 验证器运行我的 HTML 并且它通过了。
7 个解决方案
解决方案1
10 已采纳 2014-03-17 11:40:53
您正在尝试滚动到一个 div，但您的 js 代码正在寻找一个id ，所以它应该是
id="video"
这应该有效。
编辑：刚刚检查了代码，我使用了这个：
$(function() {
$('html, body').animate({
scrollTop: $('#video').offset().top}, 1000);
});
这对我有用。 您的底部图像是 18MB（很大），因此您可能想尝试等到页面（而不是DOM ）加载了以下内容：
$(window).load(function() {
// code here
});
解决方案2
2 2014-03-17 12:00:16
听起来您的代码中的其他地方有问题。
这是一个小提琴，其中包含您当前的工作http://jsfiddle.net/A5uyX/
$(function() {
$(document).scrollTop( $("#video").offset().top );
});
我会查看任何其他scrollTop函数，或者您的 url 中是否有一个哈希值指向页面上的其他地方。
你加载jquery了吗？ 尝试在脚本块之前将此添加到您的头部部分
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
编辑
通过查看您刚刚弹出的代码，我唯一能看到的是您的 css 链接没有完全关闭。 尝试关闭它，看看是否有帮助。 不是 100% 确定链接应该是什么，但它是这一行
<link href='http://fonts.googleapis.com/css?
解决方案3
1 2014-03-17 11:41:12
尝试这个：
<script type="text/javascript">
$(document).ready(function() {
$(document).scrollTop( $("#video").offset().top );
});
</script>
如果您还没有，请将属性id="video"到您的 html 标记中。
解决方案4
1 2014-03-18 09:11:18
为什么不使用简单的锚点？
<div id="foo">
</div>
和
yourlink.html#foo
我认为这有效。
解决方案5
0 2014-03-17 11:43:43
解决方案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
它应该是：
$( document ).ready(function() {
$(document).scrollTop( $("#video").offset().top );
});
显示在Scroll上但不在页面加载上的Div
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.