We Keep Coding

Scroll To specific div

I'm trying to figure out how get the page automaticlly scroll to a specific div when the page has loaded. I have tried using the jQuery scroll function, but cant get it to work correctly. Any suggestions?

I did a quick search for you, would something like this fit your needs?
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
Found here: https://css-tricks.com/snippets/jquery/smooth-scrolling/
You can test it out there as well!

You may try something like below in jQuery:-
$('html,body').animate({
scrollTop: $(".targetDiv").offset().top},
'slow');

Create a animate point to point onepage navigationn

I am creating a navigation so that when I click on my a tag it scrolls to the element it's selected to. But how should I do it so that it animates when it goes
from:
Home
to:
<div id="Home">
<h2>HOME</h2>
</div>
I would like if it could be something with jquery.

Reference: Smooth Scrolling
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
Feel free to change the speed of the animation, which is currently set to 1000ms (one second) to whichever value you like. Keep in mind that this code will affect all anchor tags which reference an element with a matching id on your HTML document.

You can do something like this with Jquery
$("a").click(function() {
$("html,body").animate({scrollTop: $("#home").offset().top});
});

You can do it like this:
JS Fiddle
var links = $('#links a');
links.on('click', function(e){
e.preventDefault();
var theHREF = $(this).attr('href'),
sectionTop = $(theHREF).offset().top;
$("html, body").stop().animate({scrollTop:sectionTop}, 500);
})

How can I get this code to only smooth scroll only the elements I want?

I have a smooth scroll code which works great, the problem is it works too well. I have other elements that use "#" is the tag(example: but I don't want the tabs to be targeted by the smooth scroll. I have the following smooth scroll code:
jQuery(document).ready(function($) {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
Is there anyway to modify this to only target the anchors for the page an not tab anchors

If you do not want to affect links with # as href value the syntax you should use looks like this:
$("[attribute!='value']")
So in your case you specify href as attribute and # as value.
$("a[href!='#']").on('click', function(e){
e.preventDefault();
//do stuff
});

How do I use javascript to animate a scroll from a link to an anchor?

http://www.littlestonegroup.org
If you click "Learn" i want it to scroll down to next link. I can have it snap to using anchor links, but I want to have the scroll effect. I have looked at a number of tutorials, but I'm not sure how to install javascript nor implemented a script suggested by a tutorial.
Thanks in advance, I really appreciate your help!

I found this smooth scroll function over at CSS-Tricks:
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
Here is the function in action JSFiddle
You can add it right before the closing body tag by wrapping the above function in:
<script type="text/javascript">
function here
</script>

Can't get smooth scrolling from fixed menu item to work

I'm using the following Javascript on my web site to create a smooth scrolling effect when the user clicks the Contact Us link, to scroll to the contact information in the footer. I got this code snippet from a comment by Devin Sturgeon on the CSS-Tricks post on smooth scrolling. My only guess is that the issue arises from the fact that the anchor link is not in a set position, but in the fixed menu. According to the post, the snippet should work simply by cutting and pasting it in.
<script type="text/javascript">
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
</script>

this line $('a[href*=#]:not([href=#])') is returning an empty set so your click handler is not being set on any dom element. The scrolling is being done by the browser using the old fashion anchor tag <a name="contact"> </a>.
#FakeRainBrigand is right, your document isn't fully loaded when you add your click handler. Just add it to the ready event.
$(document).ready(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - 181
}, 1000);
return false;
}
}
});
});