Scroll to a div using jquery







scrollTo is a plugin in jQuery. I don’t know if you have the plugin installed. You can’t use scrollTo() without the plugin.You need to call the jquery in the header .you can download jquery from http://jquery.com/ or call direct from google like this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

The code below will scroll to the correct div if you click a link in the sidebar. The window does have to be big enough to allow scrolling:

<div id="container">
<div id="sidebar">
<ul>
	<li><a id="aboutlink" href="#">auck</a></li>
	<li><a id="projectslink" href="#">Projects</a></li>
	<li><a id="resumelink" href="#">Resume</a></li>
	<li><a id="contactlink" href="#">Contact</a></li>
</ul>
</div>
<div id="content">
<div id="about">
<p class="header">uck</p>
<p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

</div>
<div id="projects" class="sections">
<p class="header">Projects</p>
<p class="info">Projects</p>

</div>
<div id="resume" class="sections">
<p class="header">Resume</p>
<p class="info">Resume</p>

</div>
<div id="contact" class="sections">
<p class="header">Contact</p>
<p class="info">Contact</p>

</div>
</div>
</div>
<script type="text/javascript">
function goToByScroll(id){
// Reove "link" from the ID
id = id.replace("link", "");
// Scroll
$('html,body').animate({
scrollTop: $("#"+id).offset().top},
'slow');
}
$("#sidebar > ul > li > a").click(function(e) {
// Prevent a page reload when a link is pressed
e.preventDefault();
// Call the scroll function
goToByScroll($(this).attr("id"));
});
</script>

Share With Friends

Speak Your Mind

*

Time limit is exhausted. Please reload CAPTCHA.