JQuery Анимированный Вернуться к началу

Question

В настоящее время я пытаюсь сделать кнопку, которая вернет пользователя в начало страницы, но будет анимирована. При нажатии на кнопку прокрутка страницы вверх до вершины. Я сделал поиск здесь и нашел this ..

И я попытался сделать JSfiddle этого, используя следующие ...

CSS

html { 
margin:0; 
padding:0; 
height:2000px; 
} 

body { 
height:2000px; 
} 

#blue-box { 
position:fixed; 
width:100px; 
height:70px; 
margin-left:0px; 
margin-top:50px; 
background-color:blue;  
} 

#blue-box h1{ 
font-family:Constantia; 
font-size:20px; 
text-align:center; 
margin-top:5px; 
color:#FFFFFF; 
} 

HTML

<div id="blue-box"> 
<h1>Back To Top</h1> 
</div> 

JavaScri пт

$(document).ready(function() { 
var away = false; 

$('#blue-box').click(function() { 
$("html, body").animate({scrollTop: 0}, 500); 
}); 

К сожалению, это не похоже на работу, и мне интересно ли я пропустил что-то или сделать что-то явно не так?

Answer 1

Вам не хватает }); в конце вашего скрипта. Добавление его solves your problem:

$(document).ready(function() { 
    var away = false; 

    $('#blue-box').click(function() { 
     $("html, body").animate({scrollTop: 0}, 500); 
    }); 
}); // <-- Here. 

Это хороший пример того, почему отступы ваш код правильно важно. Это делает такую ​​ошибку гораздо труднее пропустить.

Answer 2

Вы забыли закрыть $ (документ) .ready

http://jsfiddle.net/HX3ww/3/

Answer 3

Это также небольшое изменение, где кнопка только выцветает, как только вы начинаете прокрутки страницы вниз и исчезает, как только вы вернетесь к верх страницы http://jsfiddle.net/b4M66/

JQuery:

$(function() { 
    $(window).scroll(function() { 
     if($(this).scrollTop() != 0) { 
      $('#toTop').fadeIn();  
     } else { 
      $('#toTop').fadeOut(); 
     } 
    }); 

    $('#toTop').click(function() { 
     $('body,html').animate({scrollTop:0},800); 
    });  
});​ 

CSS:

#toTop { position: fixed; bottom: 50px; right: 30px; width: 84px; background-color: #CCC; cursor: pointer; display: none; }​ 

HTML:

<div id="toTop">Back to Top</div>​