Forum.scrollTop (); + animação
eu configuro a página para se deslocar para o topo quando um botão é carregado. Mas primeiro eu usei uma declaração if para ver se o topo da página não foi definido para 0. Então se não for 0 eu animarei a página para rolar para o topo.
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
a minha pergunta é como é que eu configuro a posição para ser 0, para que possa adicionar outra animação que corra uma vez que a página esteja a 0?
Obrigado!11 answers
Para fazer isto, poderá definir uma função de resposta para o comando animar que será executada depois de a animação de posicionamento ter terminado.
Por exemplo:
var body = $("html, body");
body.stop().animate({scrollTop:0}, 500, 'swing', function() {
alert("Finished animating");
});
Onde está o código de alerta, você pode executar mais javascript para adicionar em animação posterior.
Além disso, o' swing ' está lá para facilitar. Confira http://api.jquery.com/animate / para mais informações.
Tenta este código:
$('.Classname').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
Usa isto:
$('a[href^="#"]').on('click', function(event) {
var target = $( $(this).attr('href') );
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 500);
}
});
Para isso, pode usar o método de callback
body.animate({
scrollTop:0
}, 500,
function(){} // callback method use this space how you like
);
Tenta isto em vez disso:
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');
});
}
Solução simples:
Deslocar-se para qualquer elemento por ID ou nome:
SmoothScrollTo("#elementId", 1000);
Código:
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;
});
}
Código com função click ()
var body = $('html, body');
$('.toTop').click(function(e){
e.preventDefault();
body.animate({scrollTop:0}, 500, 'swing');
});
.toTop = classe do elemento clicado talvez img ou a
jQuery("html,body").animate({scrollTop: jQuery("#your-elemm-id-where you want to scroll").offset().top-<some-number>}, 500, 'swing', function() {
alert("Finished animating");
});
tens de ver isto.
$(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;
}
}
});
});
Ou experimentá-los
$(function () {$('a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 600);
return false;});});
$("body").stop().animate({
scrollTop: 0
}, 500, 'swing', function () {
console.log(confirm('Like This'))
}
);
Você pode usar tanto a classe CSS como o ID HTML, para mantê-la simétrica eu sempre uso a classe CSS por exemplo
<a class="btn btn-full js--scroll-to-plans" href="#">I’m hungry</a>
|
|
|
<section class="section-plans js--section-plans clearfix">
$(document).ready(function () {
$('.js--scroll-to-plans').click(function () {
$('body,html').animate({
scrollTop: $('.js--section-plans').offset().top
}, 1000);
return false;})
});