0
Я хочу щелкнуть div, а затем перейти к верхней части моей веб-страницы (с медленной анимацией) Я хочу, чтобы щелкнуть, называется #tapeHD, но он не работает ... Я не знаю, почему ... Я не получаю ошибки в консоли, поэтому ... Можете ли вы мне помочь? Спасибо ВамПерейдите к началу проблемы
/* * 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");
});
});
В чем проблема: ваша анимация работает хорошо, когда вы нажимаете второй #tapeHD http://jsfiddle.net/etpoz5jh/ для первого #tapeHD, как его прокрутка до 0 будет 0 уже –