页面加载时滚动到指定div

Question

页面加载时滚动到指定div

3

                 <!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并且它通过了。

- Kyle_Bridges

你的 div 标签是否有一个 id 为 video？应该是 <div id="video"></div> 而不是 div="video"。 - Adween

听起来你的代码有冲突，导致警报弹出后又滚回了页面顶部。 - Adween

@Kyle_Bridges 你有任何 JavaScript 错误吗？ - Adween

这是一个 JSFiddle 链接：http://jsfiddle.net/h6fhr/4/，它显示没有 JavaScript 错误。 - Kyle_Bridges

是的，脚本标签就在代码上方。 - Kyle_Bridges

显示剩余9条评论

7个回答

2

似乎您的代码存在其他问题。

这里有一个示例，其中包含您当前正在工作的内容：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链接没有完全关闭。尝试关闭它并查看是否有所帮助。不确定链接应该是什么，但是这一行是:

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

- Adween

那个小提琴是我第一次使用的。说实话，你可能是对的。我只是不明白它会如何影响它。这是我唯一使用的js代码，而且我正在使用谷歌的js库。 - Kyle_Bridges

@Kyle_Bridges，您需要发布更多的代码，这样我们才能尝试查看问题。目前，这个问题没有足够的信息来回答，因为您的代码是可以工作的... - Adween

我已经放置了Google脚本标签，删除了Google字体链接，但仍然没有变化。不过还是谢谢你的帮助！我很感激。 - Kyle_Bridges

1

试试这个：

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

如果你还没有添加过，需要给你的html标签添加属性id="video"。

- ReeCube

$(function() { 和 $(document).ready(function() { 是相同的。 - Adween

你确定吗？因为我之前在´$(function() {´上遇到了问题，而将其替换为´$(document).ready(function() {´解决了我的问题...也许并非每个版本的jQuery都支持相同的函数，或者并非每个浏览器都支持相同的函数... - ReeCube

无论如何，对我来说，它已经解决了问题，也许对Kyle_Bridges也有效。 - ReeCube

我尝试了上面的代码，但出现了问题。我的评论中有一个拼写错误，我的ID已经正确标记。谢谢你的回复！ - Kyle_Bridges

请您在问题中添加一个JSFiddle链接，包含您的代码，这样我们更容易为您找到解决方案。 - ReeCube

我用你的代码创建了一个 JSFiddle，它完美地工作了。http://jsfiddle.net/LJQY3/1/ - ReeCube

1

为什么不使用简单的锚点？

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

和

yourlink.html#foo

我认为那个可以。

- Virus721

0

尝试使用 jQuery animate()：

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

- user2571870

0

插件：平滑滚动，您可以在此处找到：

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

从文档：

$.scrollTo(...);//插件会处理此事

- prady00

-1

应该是：

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

- user3036342

请阅读以下页面 http://api.jquery.com/ready/ $(function() { 与 $(document).ready(function() { 是相同的。 - Adween

这个答案很难阅读，因为圆括号的位置。乍一看，ready(function() { 部分缺少闭合括号，但更仔细的研究表明括号在最后一行。我更喜欢布局，其中空格和换行使代码易于阅读。 - AdrianHHH

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paranoia · Accepted Answer

您正在尝试滚动到一个

，但您的JS代码正在查找一个 id，因此它应该是：

id="video"

那么这应该能够起作用。

编辑：刚刚检查了代码，我使用了这个：

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

这对我有用。您的底部图片大小为18MB（相当大），因此您可能需要等待页面（而不是 DOM）加载完毕，然后再尝试：

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