[Resolvido] Como fazer ScrollTo

Laaranja · Julho 29, 2011

Olá pessoa, boa noite.

Gostaria de saber, como se faz o efeito que tem esse site --> http://www.nilosadi.com/

Você clica no link, e vai para uma parte definida.

Ja tentei algumas coisas aqui, mas não saiu bem o que eu queria.

Alguem pode ajudar? rs'

Obrigado desde ja.

Fernando Gyn · Julho 29, 2011

Utilizando âncoras e javascript.

utilizando jquery animate

Laaranja · Julho 29, 2011

Tem como explicar melhor amigo?

Fernando Gyn · Julho 30, 2011

veja se te ajuda . não coloquei o mesmo efeito

aquele efeito usa o plugin easing pode obter mais informações no site abaixo.

http://gsgd.co.uk/sandbox/jquery/easing/

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("li a").live('click',function(){
var jQueryanchor = jQuery(this);
jQuery('html, body').stop().animate({
scrollTop: jQuery(jQueryanchor.attr('href')).offset().top
}, 10000);
});
});

</script>
</head>

<body>
<ul>
<li><a href="#teste">Teste</a></li>
</ul>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor porttitor ullamcorper. Aliquam erat volutpat. Donec mattis iaculis nibh, ut scelerisque felis scelerisque vel. Nulla ligula massa, aliquam eu placerat quis, aliquet non leo. Sed auctor molestie dolor sit amet cursus. Nulla sagittis facilisis commodo. Nulla nisi ipsum, eleifend eu sollicitudin at, venenatis in mauris. Quisque sit amet orci vitae massa lobortis tempor. Nunc mauris felis, imperdiet ut laoreet laoreet, vulputate nec magna. Suspendisse potenti.

Maecenas gravida vestibulum est at euismod. Ut non nisi vel quam adipiscing accumsan. Ut ipsum urna, ultrices fringilla feugiat a, tincidunt eu sapien. Suspendisse mauris mi, pulvinar sit amet elementum ut, vulputate quis ipsum. In fermentum enim et dui eleifend ut feugiat ipsum semper. Vestibulum convallis, justo at placerat sollicitudin, risus eros faucibus nulla, et adipiscing nisl nisl sed turpis. Aliquam justo leo, rhoncus sit amet facilisis quis, viverra nec urna. Nam urna metus, rutrum sit amet facilisis at, cursus a orci. Integer justo dolor, bibendum et varius sed, volutpat a dolor. Pellentesque neque lectus, aliquam vitae laoreet id, porttitor quis risus. Vestibulum scelerisque egestas elit ac facilisis. Ut vel lorem ipsum, eu accumsan eros. Proin mattis libero eget leo convallis bibendum. Vestibulum tempus cursus arcu ac eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Etiam sit amet mi sapien. Praesent at velit enim, a condimentum nisl. Mauris volutpat mattis erat, nec tincidunt odio pharetra ut. Pellentesque quis fringilla nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed congue scelerisque nisi, ac laoreet mi vehicula aliquam. Curabitur in mattis felis. Maecenas eget quam semper orci accumsan vestibulum. Nunc turpis est, porttitor et venenatis vitae, ultricies et lorem. Etiam at ante ante. Morbi luctus lobortis est, at congue nulla egestas nec. Vestibulum bibendum eros et lacus suscipit nec luctus odio auctor. In vel aliquam neque. Sed auctor ultrices metus sit amet tincidunt. Aenean vehicula lectus vel nisi dictum non euismod quam suscipit. Integer blandit lectus aliquet massa cursus convallis. Vivamus vel velit arcu. Integer justo mi, bibendum et dignissim a, aliquam eget tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Aliquam erat volutpat. Integer vehicula, turpis sit amet gravida lacinia, arcu nulla malesuada libero, eget tincidunt ante enim at lacus. Cras sed nunc dui. Sed et tellus ac nunc tristique porta at et elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus sollicitudin dapibus nulla, a pharetra enim sagittis ut. Ut laoreet sagittis tellus, ut placerat sapien porttitor ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in lectus dolor, in ullamcorper odio. Phasellus eu consequat leo. Morbi ultricies, ante bibendum fermentum faucibus, lorem velit commodo est, sed consectetur nunc magna congue nulla. Maecenas rhoncus, tortor et porttitor rhoncus, eros dui sagittis ligula, dignissim facilisis ipsum odio ac mi. Duis cursus, erat sed iaculis porta, risus nisi molestie tellus, ut blandit lorem mi vitae ligula. Aenean viverra massa non nunc tristique rhoncus. Donec vestibulum velit posuere nibh eleifend tincidunt.

Duis libero odio, placerat sit amet porttitor id, fermentum eget sapien. Curabitur pulvinar, quam non ultricies cursus, nulla tellus tempor lorem, ac interdum lacus tellus at nisl. Integer commodo fringilla est, eu condimentum augue pharetra eget. Nullam mi libero, malesuada sit amet sodales eu, iaculis cursus metus. Vestibulum hendrerit tristique felis eu varius. Nunc elementum, nisl a ullamcorper lacinia, erat erat fermentum ipsum, in dignissim velit velit nec tellus. Praesent feugiat sodales diam ut laoreet. Phasellus hendrerit sodales viverra. Sed feugiat rutrum tincidunt. Quisque quis metus odio, sit amet molestie sem. Mauris eget dolor et nunc luctus faucibus. Vivamus et felis magna. Mauris semper porta eros, non lobortis tellus convallis vitae. Vestibulum cursus dolor eu felis feugiat vitae varius eros euismod. Donec quis felis accumsan ipsum condimentum ornare eu sit amet dui.

Generated 5 paragraphs, 640 words, 4338 bytes of Lorem IpsumLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor porttitor ullamcorper. Aliquam erat volutpat. Donec mattis iaculis nibh, ut scelerisque felis scelerisque vel. Nulla ligula massa, aliquam eu placerat quis, aliquet non leo. Sed auctor molestie dolor sit amet cursus. Nulla sagittis facilisis commodo. Nulla nisi ipsum, eleifend eu sollicitudin at, venenatis in mauris. Quisque sit amet orci vitae massa lobortis tempor. Nunc mauris felis, imperdiet ut laoreet laoreet, vulputate nec magna. Suspendisse potenti.