Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Galera boa noite, estou desenvolvendo um um site e to com um probleminha, quero fazer um menu como o deste site www.elodigital.cc em que você clicar em algum botão do menu, ele não muda de pagina, apenas este efeito em que o site parece esta rolando sozinho, na verdade eu até ja fiz, só que , não estou conseguindo é este efeito de rolagem, quando eu clico ele não esta rolando, muito pelo contrario ele vai de uma vez, e eu queria que rola-se suavemnete como o exemplo que passei, obrigado espero ter sido claro em minha duvida!
>
Marcelo,
não entendi muito a sua dúvida. Você já adicionou o evento, porém o evento não está funcionando, certo? Ou ainda não sabe como fazer e quer o código do evento?
É puro JQuery.
Ola Diéssica eu não sabia que é puro jquery, como consigo codigo do evento?
Sim Marcelo, o Javascript/JQuery que faz o efeito.
O nome do efeito é JQuery smooth scroll, e é tipo um scroll animado e pode ser tanto horizontal como vertical.
Antes de sair copiando o código, é importante que você já tenha os elementos criados (pois basta linkar com #).
Segue a função:
$(function(){
$("a[href^=#]").smoothScroll(300,20,20,20)
})Essa parte é importante. A linha $("a[href^=#]").smoothScroll(300,20,20,20)determina que todos os links com # serão disparados com o evento, como eu disse acima. Os números que estão dentro dos parenteses determinam alguns valores opcionais:
300 = Duração
20 = Velocidade
20 = Margem esquerda
20 = Margem superior
Segue o código que realiza todo o efeito do evento acima:
var scrollInt
var scrTime, scrSt, scrDist, scrDur, scrInt, scrSl, scrDistX
function easeInOut(t,b,c,d)
{
return (c/2 * (1 - Math.cos(Math.PI*t/d)) + B);
}
scrollPage = function()if (scrTime < scrDur) {
window.scrollTo(easeInOut(scrTime,scrSl,scrDistX,scrDur), easeInOut(scrTime,scrSt,scrDist,scrDur))jQuery.fn.extend({
smoothScroll : function(duration, velocity, marginLeft, marginTop)
{
if(typeof(duration) == 'undefined') duration = 500
if(typeof(velocity) == 'undefined') velocity = 10
if(typeof(marginLeft) == 'undefined') marginLeft = 0
if(typeof(marginTop) == 'undefined') marginTop = 0
this.click(function(){
var element_id = $(this).attr("href")
var source_positions = {
top : $(this).get(0).offsetTop,
left : $(this).get(0).offsetLeft
}
var dest_positions = {
top : $(element_id).get(0).offsetTop-marginTop,
left : $(element_id).get(0).offsetLeft-marginLeft
}
if (window.scrollY)
scrSt = window.scrollY
else if (document.documentElement.scrollTop)
scrSt = document.documentElement.scrollTop
else
scrSt = document.body.scrollTop
if (window.scrollX)
scrSl = window.scrollX
else if (document.documentElement.scrollLeft)
scrSl = document.documentElement.scrollLeft
else
scrSl = document.body.scrollLeft
scrDist = dest_positions.top - scrSt
scrDistX = dest_positions.left - scrSl
scrDur = 500
scrTime = 0
scrInt = 5
// set interval
clearInterval(scrollInt)
scrollInt = setInterval(scrollPage, scrInt)
return false
})
}
})É importante e INDISPENSÁVEL que não esqueça da biblioteca JQuery. Eu costumo usar link da Google para testes, mas você pode copiar e colocar no seu servidor daí você linka na página. URL: http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js
Qualquer dúvida sobre entender ou adaptar o código na tua página, é só perguntar.
[]s,
Diéssica Gurskas
Diéssica boa tarde, quebrei a cabeça pra tentar incluir esta função em meu site antes de pedir ajuda, mas infelizmente não consegui, me da uma força!
>
Diéssica boa tarde, quebrei a cabeça pra tentar incluir esta função em meu site antes de pedir ajuda, mas infelizmente não consegui, me da uma força!
Marcelo, antes de mexer com jQuery, é importante ENTENDER jQuery.
Mas podemos tentar. Informe o seu problema na adaptação do código e informe a linha de erro, ou a que você não consegue concluir.
Os códigos estão todos corretos, acabei de testar.
[]s,
Diéssica Gurskas
Ola Diéssica, mais uma vez boa tarde, quebrei a cabeça mais um pouco, e deu tud certo, consegui resolver, muito obrigado por sua ajuda, valeu mesmo pela força!
>
Ola Diéssica, mais uma vez boa tarde, quebrei a cabeça mais um pouco, e deu tud certo, consegui resolver, muito obrigado por sua ajuda, valeu mesmo pela força!
De nada Marcelo.
Na próxima vez poste na área de DHTML, Javascript, jQuery.
[]s,
Diéssica Gurskas
Marcelo,
não entendi muito a sua dúvida. Você já adicionou o evento, porém o evento não está funcionando, certo? Ou ainda não sabe como fazer e quer o código do evento?
É puro JQuery.