Ir para conteúdo
JP_xD

Ancora desliza até a div

Recommended Posts

Ola pessoal, qual é o script que quando eu clico em um link com uma ancora ao inves de aparecer direto na div com o id a pagina vai deslizando até ele?

Compartilhar este post


Link para o post
Compartilhar em outros sites
$('.divClass').animate({top:'-932px', left:'-2373px'});

 

Acredito que assim ajuda a clarear as suas ideias.

E outra, penso que você não precise ser agressivo para conseguir respostas aqui.

Editado por Eduardo Giullyanny

Compartilhar este post


Link para o post
Compartilhar em outros sites

é este aqui:

 

http://demos.flesler.com/jquery/scrollTo/

 

ou um simples animate em cima do scrollTo da página.

Compartilhar este post


Link para o post
Compartilhar em outros sites

deu certo gente fiz assim com base em um exemplo que achei

 

$('.efeito-desliza').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 2500);
return false;

});

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eu Sei Que Ja Faz Tempo Que Existe O Post;

Mais Como Eu Estava Pesquisando E Chegou Aqui, Outros Devem Chega :D

RESOLVI COM ESSE CÓDIGO:

$(function() {
  $('a').bind('click',function(event){
    var $anchor = $(this);
    $('html, body').stop().animate({scrollTop: $($anchor.attr('href')).offset().top}, 1000,'swing');
    // Outras Animações
    // linear, swing, jswing, easeInQuad, easeInCubic, easeInQuart, easeInQuint, easeInSine, easeInExpo, easeInCirc, easeInElastic, easeInBack, easeInBounce, easeOutQuad, easeOutCubic, easeOutQuart, easeOutQuint, easeOutSine, easeOutExpo, easeOutCirc, easeOutElastic, easeOutBack, easeOutBounce, easeInOutQuad, easeInOutCubic, easeInOutQuart, easeInOutQuint, easeInOutSine, easeInOutExpo, easeInOutCirc, easeInOutElastic, easeInOutBack, easeInOutBounce
  });
});

Obs.: swing é o deslize...
o link ancora eu usei assim:
 

<a href="#p">PAGE/PARTE DO SITE</a>

<div id="#p"></div>

#p = você bota que quiser importante que no link e o ID esteja igual...

 

Espero ajuda alguémm.....

 

Fuiii

  • Gostei 3

Compartilhar este post


Link para o post
Compartilhar em outros sites

eu estava procurando por um script pronto em javascript puro e não achei, eu consegui fazer com javascript puro dessa forma:

document.getElementById("life-in-job").addEventListener('click', function(){butEvent = 1;topFunction();});
document.getElementById("benefits").addEventListener('click', function(){butEvent = 2; topFunction();})
document.getElementById("company-values").addEventListener('click', function(){butEvent = 3; topFunction();})
var butEvent = 0;
var butJob = document.getElementById("life-in-job-img");
var butBenefits = document.getElementById("benefits-job-img");
var butValues = document.getElementById("values-img");
function topFunction() {
    if(butEvent == 1){
        window.scroll({top: but.offsetTop, behavior: 'smooth'});
    }
    if(butEvent == 2){    
        window.scroll({top: butBenefits.offsetTop, behavior: 'smooth'});
	}
    if(butEvent == 3){
        window.scroll({top: butCarImg.offsetTop, behavior: 'smooth'});
	}
}

acredito que existam formas mais simples de se fazer menu âncora e queria comparar um javascript puro com o meu e ver se eu aprendo mais um pouco ...

 

                                                                                                             <!--:blush:-->

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.