Smooth scroll to div id jQuery
You need to animate the html, body
DEMO http://jsfiddle.net/kevinPHPkevin/8tLdq/1/
$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#myDiv").offset().top
}, 2000);
});
Jquery Smooth Scroll To DIV - Using ID value from Link
Ids are meant to be unique, and never use an id that starts with a number, use data-attributes instead to set the target like so :
<div id="searchbycharacter">
<a class="searchbychar" href="#" data-target="numeric">0-9 |</a>
<a class="searchbychar" href="#" data-target="A"> A |</a>
<a class="searchbychar" href="#" data-target="B"> B |</a>
<a class="searchbychar" href="#" data-target="C"> C |</a>
... Untill Z
</div>
As for the jquery :
$(document).on('click','.searchbychar', function(event) {
event.preventDefault();
var target = "#" + this.getAttribute('data-target');
$('html, body').animate({
scrollTop: $(target).offset().top
}, 2000);
});
Scroll to a div using jQuery
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>
Scroll to an element with jQuery
Assuming you have a button with the id button
, try this example:
$("#button").click(function() {
$([document.documentElement, document.body]).animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
});
I got the code from the article Smoothly scroll to an element without a jQuery plugin. And I have tested it on the example below.
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(document).ready(function (){
$("#click").click(function (){
$('html, body').animate({
scrollTop: $("#div1").offset().top
}, 2000);
});
});
</script>
<div id="div1" style="height: 1000px; width 100px">
Test
</div>
<br/>
<div id="div2" style="height: 1000px; width 100px">
Test 2
</div>
<button id="click">Click me</button>
</html>
Smooth Scrolling to ID
Your target and trigger is in the same line. So I am not sure how you are testing this.
$('#myButton').on('click', function() {
var $root = $("body > div");
$root.animate({
scrollTop: $('#insert2').offset().top
}, 1000);
});
Fiddle
https://jsfiddle.net/u4ecuph2/
Note
1. I am giving $("body > div"); under the assumption that you want to smooth scroll contents withing that particular div and not on the whole document.
2. I have moved the button to the top.
Related Topics
How to Share Code Between Node.Js and the Browser
How to Get Notified About Changes of the History via History.Pushstate
How to Convert an Integer to Binary in JavaScript
Why Should I Use a Semicolon After Every Function in JavaScript
How to Destructure Object Properties with Key Names That Are Invalid Variable Names
Remove Not Alphanumeric Characters from String
String.Replace' Weird Behavior When Using Dollar Sign ($) as Replacement
Serializing Object That Contains Cyclic Object Value
How to Remove All the Options of a Select Box and Then Add One Option and Select It with Jquery
Load Jquery with JavaScript and Use Jquery
Get Viewport/Window Height in Reactjs
JavaScript Print Iframe Contents Only
Where to Write to Localstorage in a Redux App