Я настроил прокрутку страницы к верху при нажатии на кнопку. Но сначала я использовал оператор if, чтобы проверить, не установлен ли верх страницы на 0. Затем, если он не равен 0, я анимирую прокрутку страницы к верху.
var body = $("body");
var top = body.scrollTop() // Get position of the body
if(top!=0)
{
body.animate({scrollTop:0}, '500');
}
Теперь самое сложное - анимировать что-то ПОСЛЕ того, как страница прокрутится к вершине. Поэтому моя следующая мысль - выяснить, какова позиция страницы. Чтобы узнать это, я использовал консольный журнал.
console.log(top); // the result was 365
Это дало мне результат 365, я полагаю, что это номер позиции, на которой я находился непосредственно перед прокруткой к вершине.
Мой вопрос в том, как мне установить позицию 0, чтобы я мог добавить другую анимацию, которая запускается, когда страница находится на 0?
Спасибо!
Для этого можно задать функцию обратного вызова для команды animate, которая будет выполняться после завершения анимации прокрутки.
Например:
var body = $("html, body");
body.stop().animate({scrollTop:0}, 500, 'swing', function() {
alert("Finished animating");
});
Там, где находится код предупреждения, вы можете выполнить еще один javascript для добавления дальнейшей анимации.
Кроме того, 'swing' используется для установки смягчения. Более подробную информацию можно найти на сайте http://api.jquery.com/animate/.
Используйте это:
$('a[href^="#"]').on('click', function(event) {
var target = $( $(this).attr('href') );
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 500);
}
});
Попробуйте сделать это:
var body = $("body, html");
var top = body.scrollTop() // Get position of the body
if(top!=0)
{
body.animate({scrollTop :0}, 500,function(){
//DO SOMETHING AFTER SCROLL ANIMATION COMPLETED
alert('Hello');
});
}
для этого вы можете использовать метод обратного вызова
body.animate({
scrollTop:0
}, 500,
function(){} // callback method use this space how you like
);
прокрутка к любому элементу по ID или по имени:
SmoothScrollTo("#elementId", 1000);
код:
function SmoothScrollTo(id_or_Name, timelength){
var timelength = timelength || 1000;
$('html, body').animate({
scrollTop: $(id_or_Name).offset().top-70
}, timelength, function(){
window.location.hash = id_or_Name;
});
}
Код посредством нажатия функция()
var body = $('html, body');
$('.toTop').click(function(e){
e.preventDefault();
body.animate({scrollTop:0}, 500, 'swing');
});
.toTop
= класс щелчке элемент может быть ИМГ
или A
это надо видеть
$(function () {
$('a[href*="#"]:not([href="#"])').click(function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
или попробовать их
$(function () {$('a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 600);
return false;});});