Jquery Animated Вернуться к началу - PullRequest
Новая
       26

Jquery Animated Вернуться к началу

0 голосов
/ 20 января 2012

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

И я попытался сделать 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>

JavaScript 

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

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

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

Ответы [ 3 ]

3 голосов
/ 20 января 2012

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

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

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

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

1 голос
/ 20 января 2012

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

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

0 голосов
/ 13 апреля 2012

Это также небольшое изменение, когда кнопка затухает только после того, как вы начинаете прокручивать страницу вниз, и исчезает, когда вы возвращаетесь в верхнюю часть страницы 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>​
...