Question

我想点击一个div，然后转到我的网页顶部（慢动画）我要点击的div是一个名为#tapeHD的div，但它不起作用...... 我不知道为什么......我在控制台中没有收到任何错误，所以...... 你能帮我个伙吗？谢谢你

/ * HTML5 * /

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <meta charset="UTF-8" />
        <meta name="author" content="Antonio Bueno González" />
        <meta name="description" content="Descripción de la página web" />
        <meta name="keywords" content="Palabras clave" />
        <meta name="viewport" content="width=device-width" />
        <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
        <script src="js/javascript.js"></script>
        <title>tapeHD</title>

        <!--[if IE]>
        <link rel="stylesheet" type="text/css" href="ie_style.css" />
        <![endif]-->
    </head>

    <body>
        <div id="wrapper">
            <div id="principal">
                <header>
                    <p>tapeHD</p>
                    <hr/>
                    <span>Enero 17, 2015</span>
                </header>
                <section>
                    <video autoplay loop muted volume="0" id="video_index">
                        <source src="videos/index.webm" type="video/webm" />
                        <source src="videos/index.mp4" type="video/mp4" />
                        <source src="videos/index.ogv" type="video/ogv" />
                    </video>

                    <div id="comenzar">
                        <h2 class="primero">Comparte videos con más</h2>
                        <h2 class="segundo">de un <span>millón</span> de personas</h2>
                        <input type="submit" value="Comenzar ahora" id="boton_comenzar" />
                    </div>
                </section>
            </div>

            <div id="pagina">
                <header id="cabecera">
                    <div id="cabecera_menu">
                        <div id="apartado_logo"><div id="tapeHD"><p>tapeHD</p></div></div>
                        <div id="busqueda"><input type="search" id="buscar" placeholder="Buscar" value="" /></div>
                        <!-- Este div se hace visible una vez el usuario está logeado... -->
                        <div id="usuario">
                            <input type="submit" id="iniciar" value="Iniciar sesión" />
                            <div id="esfera"></div>
                        </div>
                    </div>
                    <div id="menu_usuario">
                        <a id="boton_menu" class=""><span></span></a>
                        <nav id="opciones">
                            <li id="perfil" class=""><a></a></li>
                            <li id="ajustes" class=""><a></a></li>
                            <input type="submit" id="desconectar" class="" value="" />
                        </nav>
                    </div>
                </header>
                <section>
                    <div id="contenido"></div>
                    <div id="menu">
                        <div id="info">
                            <nav>
                                <ul>Etiquetas
                                    <li><a href="#">Animales</a></li>
                                    <li><a href="#">Deportes</a></li>
                                    <li><a href="#">Comedia</a></li>
                                    <li><a href="#">Juegos</a></li>
                                    <li><a href="#">Terror</a></li>
                                </ul>

                                <ul>Sobre nosotros
                                    <li><a href="#">Quiénes somos</a></li>
                                    <li><a href="#">Contacto</a></li>
                                </ul>
                            </nav>
                        </div>
                        <div id="social">
                            <nav>
                                <li class="facebook"><a target="_blank" href="https://www.facebook.com/">
                                <img src="images/social/facebook.png" /></a></li>

                                <li class="twitter"><a target="_blank" href="https://twitter.com/">
                                <img src="images/social/twitter.png" /></a></li>

                                <li class="google"><a target="_blank" href="https://plus.google.com/">
                                <img src="images/social/google.png" /></a></li>

                                <li class="pinterest"><a target="_blank" href="https://es.pinterest.com/">
                                <img src="images/social/pinterest.png" /></a></li>
                            </nav>
                        </div>
                    </div>
                </section>
                <footer>
                    <div id="banner">
                        <h2>¿Tienes más dudas?</h2>
                        <p>Póngase en contacto con nuestro personal técnico</p>
                        <div id="personal">
                            <div class="coder"></div>
                            <div class="coder"></div>
                            <div class="coder"></div>
                        </div>
                    </div>
                    <div id="copyright">
                        <p><span>Copyright© 2015:</span> Todos los derechos reservados</p>
                    </div>
                </footer>
            </div>
        </div>
    </body>
</html>

/ JQuery的 /

jQuery("document").ready(function($) {
    var cabecera = $("#cabecera");
    var position = cabecera.offset().top;

    /* Fixed nav */
    $(window).scroll(function() {
        if($(this).scrollTop() >= position) {
            cabecera.addClass("fixed-nav");
        } else {
            cabecera.removeClass("fixed-nav");
        }
    });

    /* Scroll to top */
    $("#tapeHD").click(function() {
        $("html, body").animate({scrollTop: 0},"slow");
    });
});

Answer 1

这应该有效：

$("#tapeHD").click(function() {
    $("html, body").animate({scrollTop: $('body').offset().top },
          'slow');

DEMO

Answer 2

DEMO

jQuery("document").ready(function($) {
    var cabecera = $("#cabecera");
    var position = cabecera.offset().top;
    /* Fixed nav */
    $(window).scroll(function() {
        if($(this).scrollTop() >= position) {
            cabecera.addClass("fixed-nav");
        } else {
            cabecera.removeClass("fixed-nav");
        }
    });

    /* Scroll to top */
    $("#tapeHD").click(function() {
        $("html, body").animate({scrollTop: 0},"slow");
    });
    $("#principal").click(function() {
        $("html, body").animate({scrollTop: position},"slow");
    });
});

Answer 3

我完全愚蠢，我在错误的js文件中写了代码（该文件没有被链接......）我很抱歉，伙计，谢谢你的帮助

滚动到顶部问题

3 个答案: