Jump to content
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?

Share this post


Link to post
Share on other 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.

Edited by Eduardo Giullyanny

Share this post


Link to post
Share on other sites

é este aqui:

 

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

 

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

Share this post


Link to post
Share on other 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;

});

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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:-->

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.