Smooth animation of HTML sections

StackOverflow https://stackoverflow.com/questions/15311486

Question

I am aware that it is possible to animate the transition to html sections so that they are smooth.

This website: http://en.wikipedia.org/wiki/Dobroslav_Jevdevic

  • Uses HTML sections.
  • When you click a link from the contents list, you go straight there.

This website: http://whatbrowser.org

  • Uses HTML sections.
  • When you click a link ('Return to top' at bottom of page), you go up with a smooth transition.

I have also seen this on many other websites, how is it exactly that you do it?

At first guess, I'd think you need jQuery, but being more of a HTML type person I'm not really in to java... How would I do it exactly? Thanks in advance for any help :D

Was it helpful?

Solution 

$('body').animate({scrollTop: 222});

OTHER TIPS

In the reference site(http://en.wikipedia.org/wiki/Dobroslav_Jevdevic) this is done with the hwlp of id. eg<a href="#abc">Click Here</a> In anchor tag href we pass the id of element where the page should scroll on click of anchor tag.But to provide the smooth effect you have to use jquery method.Also there is javascript method scrollTo() method which you can use.If you want to use only html code for same purpose and not jquery then see this code

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<a href="#abc">Click Here</a>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>

   <h2 id="abc">Main Section</h2>
   <p>Hello</p>
   <p>Hello</p>
   <p>Hello</p>
   <p>Hello</p>
   <p>Hello</p>
   <p>Hello</p>
   <p>Hello</p>
   <p>Hello</p>
</body>
</html>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top