$('a.page-scroll').click(function(event) {
event.preventDefault();
var target = $(this).attr('href');
if (target.length) {
$('html,body').animate({
scrollTop: $(target).offset().top
}, 'slow');
}
});
<div>
<h1 id="top">Some Title</h1>
<p class="description">Click the link to scroll to the paragraph.</p>
<ul class="key-container">
<li><a class="page-scroll" href="#p1"><span>Paragraph 1</span></a></li>
<li><a class="page-scroll" href="#p2"><span>Paragraph 2</span></a></li>
<li><a class="page-scroll" href="#p3"><span>Paragraph 3</span></a></li>
<li><a class="page-scroll" href="#p4"><span>Paragraph 4</span></a></li>
<li><a class="page-scroll" href="#p5"><span>Paragraph 5</span></a></li>
<li><a class="page-scroll" href="#p6"><span>Paragraph 6</span></a></li>
</ul>
<body>
<div id="p1">
<h2>Paragraph 1</h2>
<a class="page-scroll" href="#top">Back To Top</a>
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis neque diam, fermentum eget dolor in, pulvinar pretium metus. Etiam vestibulum, turpis ut maximus ullamcorper, justo turpis ultricies ipsum, nec ornare massa est vel mi. Integer ornare
tempus vehicula. Mauris gravida lectus metus. Mauris mattis sodales rutrum. Donec venenatis viverra elementum. Aliquam erat volutpat. Ut non est eu est pharetra ornare. Nulla fringilla arcu et erat suscipit aliquam eu ac justo. Donec egestas rhoncus
dui, sed eleifend arcu ultricies a.</p>
</div>
<div id="p2">
<h2>Paragraph 2</h2>
<a class="page-scroll" href="#top">Back To Top</a>
<p>orem ipsum dolor sit amet, consectetur adipiscing elit. Duis neque diam, fermentum eget dolor in, pulvinar pretium metus. Etiam vestibulum, turpis ut maximus ullamcorper, justo turpis ultricies ipsum, nec ornare massa est vel mi. Integer ornare
tempus vehicula. Mauris gravida lectus metus. Mauris mattis sodales rutrum. Donec venenatis viverra elementum. Aliquam erat volutpat. Ut non est eu est pharetra ornare. Nulla fringilla arcu et erat suscipit aliquam eu ac justo. Donec egestas rhoncus
dui, sed eleifend arcu ultricies a.</p>
</div>
<div id="p1">
<h2>Paragraph 3</h2>
<a class="page-scroll" href="#top">Back To Top</a>
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis neque diam, fermentum eget dolor in, pulvinar pretium metus. Etiam vestibulum, turpis ut maximus ullamcorper, justo turpis ultricies ipsum, nec ornare massa est vel mi. Integer ornare
tempus vehicula. Mauris gravida lectus metus. Mauris mattis sodales rutrum. Donec venenatis viverra elementum. Aliquam erat volutpat. Ut non est eu est pharetra ornare. Nulla fringilla arcu et erat suscipit aliquam eu ac justo. Donec egestas rhoncus
dui, sed eleifend arcu ultricies a.</p>
</div>
<div id="p3">
<h2>Paragraph 3</h2>
<a class="page-scroll" href="#top">Back To Top</a>
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis neque diam, fermentum eget dolor in, pulvinar pretium metus. Etiam vestibulum, turpis ut maximus ullamcorper, justo turpis ultricies ipsum, nec ornare massa est vel mi. Integer ornare
tempus vehicula. Mauris gravida lectus metus. Mauris mattis sodales rutrum. Donec venenatis viverra elementum. Aliquam erat volutpat. Ut non est eu est pharetra ornare. Nulla fringilla arcu et erat suscipit aliquam eu ac justo. Donec egestas rhoncus
dui, sed eleifend arcu ultricies a.</p>
</div>
<div id="p4">
<h2>Paragraph 4</h2>
<a class="page-scroll" href="#top">Back To Top</a>
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis neque diam, fermentum eget dolor in, pulvinar pretium metus. Etiam vestibulum, turpis ut maximus ullamcorper, justo turpis ultricies ipsum, nec ornare massa est vel mi. Integer ornare
tempus vehicula. Mauris gravida lectus metus. Mauris mattis sodales rutrum. Donec venenatis viverra elementum. Aliquam erat volutpat. Ut non est eu est pharetra ornare. Nulla fringilla arcu et erat suscipit aliquam eu ac justo. Donec egestas rhoncus
dui, sed eleifend arcu ultricies a.</p>
</div>
<div id="p5">
<h2>Paragraph 5</h2>
<a class="page-scroll" href="#top">Back To Top</a>
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis neque diam, fermentum eget dolor in, pulvinar pretium metus. Etiam vestibulum, turpis ut maximus ullamcorper, justo turpis ultricies ipsum, nec ornare massa est vel mi. Integer ornare
tempus vehicula. Mauris gravida lectus metus. Mauris mattis sodales rutrum. Donec venenatis viverra elementum. Aliquam erat volutpat. Ut non est eu est pharetra ornare. Nulla fringilla arcu et erat suscipit aliquam eu ac justo. Donec egestas rhoncus
dui, sed eleifend arcu ultricies a.</p>
</div>
<div id="p6">
<h2>Paragraph 6</h2>
<a class="page-scroll" href="#top">Back To Top</a>
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis neque diam, fermentum eget dolor in, pulvinar pretium metus. Etiam vestibulum, turpis ut maximus ullamcorper, justo turpis ultricies ipsum, nec ornare massa est vel mi. Integer ornare
tempus vehicula. Mauris gravida lectus metus. Mauris mattis sodales rutrum. Donec venenatis viverra elementum. Aliquam erat volutpat. Ut non est eu est pharetra ornare. Nulla fringilla arcu et erat suscipit aliquam eu ac justo. Donec egestas rhoncus
dui, sed eleifend arcu ultricies a.</p>
</div>
</body>
</div>
p.description {
font-style: italic;
}
.key-container li {
display: inline;
}