First, your code does not contain a contact
div, it has a contacts
div!
In sidebar you have contact
in the div at the bottom of the page you have contacts
. I removed the final s
for the code sample. (you also misspelled the projectslink
id in the sidebar).
Second, take a look at some of the examples for click on the jQuery reference page. You have to use click like, object.click( function() { // Your code here } );
in order to bind a click event handler to the object.... Like in my example below. As an aside, you can also just trigger a click on an object by using it without arguments, like object.click()
.
Third, scrollTo
is a plugin in jQuery. I don't know if you have the plugin installed. You can't use scrollTo()
without the plugin. In this case, the functionality you desire is only 2 lines of code, so I see no reason to use the plugin.
Ok, now on to a solution.
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:
// This is a functions that scrolls to #{blah}link
function goToByScroll(id) {
// Remove "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.id);
});
Live Example
( Scroll to function taken from here )
PS: Obviously you should have a compelling reason to go this route instead of using anchor tags <a href="#gohere">blah</a>
... <a name="gohere">blah title</a>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…