Develop Reference

How to smooth scroll on click jquery

I want to be able to smooth scroll to a specific div using its id but my current script isn't correct. Can anyone see where my error is?
Here is my fiddle for reference here.
<script>
$(document).ready(function() {
$('a').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 5000);
return false;
});
});
</script>
Thanks.

no need to add script tag in jsfiddle. Try with this fiddle. http://jsfiddle.net/wn6rv94t/1/
Removed<script></script>

ScrollTo working with all browsers but complete callback fires multiple times

I have read this is the correct way to get scroll to and animation working in Jquery with the body and html tags. However, this also fires the callback multiple times event if $("body, html") shows only two items in a list. At the most I would think 2, after each iteration it can go up which I'm not sure why, but I need to execute the callback one time with his setup? Any fix?
$("body, html").animate({ scrollTop: top }, function () {
animateScroll($topItem);
});

With $("body, html") you're selecting two elements to animate, first body and second html. That's because two callbacks are fired, just like it should be.
See explanation here: Callback of .animate() gets called twice jquery
Try to change your code as follows:
$("html body").animate({ scrollTop: top }, function () {
animateScroll($topItem);
});

you can try this workaround:
var callbackFired=false;
$("body, html").animate({ scrollTop: top }, function () {
if(!callbackFired){
animateScroll($topItem);
callbackFired=true;
}
});

This did it for me.
$("body, html").animate({ scrollTop: top }).promise().done(function() {
animateScroll($topItem);
});

Jquery to scroll down to top of each section with button press

This is my code: Js Fiddle
As you can see I have several sections on top of each other with 100% height. I want to know how I can get it so when the user clicks on "learn more" they scroll to the next section, so the top of the section is at the top of the page.
Normally it would be quite simple as I could do this:
$('body').animate({
scrollTop:$(document).height()
});
However this won't work if the user has already scrolled halfway down on of the sections and then hits the button. It would also be good if I could use the same function for each button press, instead of having three different functions, one for each different section.
I guess the code would be something like (in pseudo): scroll to top sectiona + 1

with jQuery and smooth scrolling
$('a').click(function(){
var nextSection = $(this).closest('section').next('section');
$('html, body').animate({
scrollTop: $(nextSection).offset().top
}, 2000);
});

Why not you pass id's to each section and in href refer to that id like
<section id="sectionOne">
Move to section two
</section>
<section id="sectionTwo">
Move to section one
</section>

You can also try the following.
var amount_to_scroll_by = $(document).scrollTop() + element_to_scroll.getBoundingClientRect().top);
$(document).scrollTop(amount_to_scroll_by); // animate this scroll
Hope this helps :)

Using jquery, you can smoothly scroll to the target.
Here is a SAMPLE
JS:
$("a").click(function(e) {
e.preventDefault();
var target = $(this).attr('href');
$('html, body').animate({ scrollTop : $(target).offset().top + "px"});
});

You should first fix up your anchors and use the hash fragments to allow for native navigation between anchors.
I have created a very simple demo for you to understand this (not using your markup to keep it simple).
Demo: http://jsfiddle.net/abhitalks/9uxGq/15/
(another demo with your markup: http://jsfiddle.net/abhitalks/9uxGq/19/)
You need two anchors, one as click link and the other to mark the position of target as anchor.
For example:
<div>
<a id="LearnMore1"></a> <!-- Used for marking the anchor with hash fragment -->
<h2>Sub Heading 2</h2>
<p>
Some text content here
</p>
Learn More <!-- Used to click to got to next anchor -->
</div>
Note: Of course instead of using a second anchor as a marker, you could use the div (or in your case section) with an id. But, an a is better because it is more semantic for content navigation and it means an anchor.
Once done, this becomes a fallback for you. Now you can easily implement animations using jQuery etc.
It would be as simple as this:
// bind click on anchors (use selectors as per your requirements)
$("a").on("click", function(e) {
e.preventDefault(); // prevent the default behaviour
var nextAnchor = this.hash.replace("#", ""); // get the next marker anchor
var gotoPoint = $("#" + nextAnchor).position().top; // get the position of marker
$('body').animate({ scrollTop: gotoPoint }, 'normal'); // animate the body
});
Alternatively:
// bind click on anchors (use selectors as per your requirements)
$("a").on("click", function(e) {
e.preventDefault(); // prevent the default behaviour
var nextAnchor = $(this).attr('href'); // get the next marker anchor
var gotoPoint = $(nextAnchor).position().top; // get the position of marker
$('body').animate({ scrollTop: gotoPoint }, 'normal'); // animate the body
});
Now applying this to your use case, the demo becomes: http://jsfiddle.net/abhitalks/9uxGq/19/
Hope that helps, and you can work it out in your markup and use-case.
.

JAVASCRIPT - Change Element CSS on click

I have a navigation bar that when clicked, the page will be scrolled into that part of the page. I used this script.
$('li a').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 500);
return false;
});
How do I change this element's style so that when it is clicked, it will slide into a certain part of the page as well as that navbar will have a different background image?
I tried adding an onclick() function in the links. It works but it does not scroll into the section of the page where it is suppose to slide. I tried adding the script inside the sliding script hoping it may have an effect but it does not work.

You can add this into that function.
$('li a').click(function(){
var el = $(this);
$('li a').removeClass('selected');
el.addClass('selected');
$('html, body').animate({
scrollTop: $( el.attr('href') ).offset().top
}, 500);
return false;
});
Remove the "selected" class from any li then add it to the currently clicked one.

you can use the $(element).css(cssElement, value) to change the CSS.
Example:
$("#myDiv").click(function(){
$(this).css("background-color", "Black");
});

jQuery - Using .slideToggle and .animate simultaneously

I have a portion of jQuery that just doesn't seem to be working correctly. I have a link to click, [show/hide] which should slideToggle a div. At the same time, I want to animate it so that the page scrolls to the top of the div. It works when I put the animate function inside the slideToggle function, like in this jfiddle.
However, this means that the div i want slides out, and then the page scrolls down. id like to set it up so that both happen simultatneously, which I tried to do in this jfiddle but it simply doesn't work. I also tried doing the scroll animation first, then the slideToggle, which didn't work - is there a way to implement this also?? Cheers!

$(document).ready(function () {
$('.click_to_hide').click(function () {
var visible = $('.hide_on_click').is(":visible");
$('.hide_on_click').slideToggle(500);
if (!visible) {
$('html, body').animate({
scrollTop: $('.hide_on_click').offset().top
}, 500);
}
});
});
http://fiddle.jshell.net/YFR2e/3/

$(document).ready(function () {
$('.click_to_hide').click(function () {
$('.hide_on_click').slideToggle(500);
if($('.hide_on_click').is(':visible')){
$('html, body').animate({
scrollTop: $('.hide_on_click').offset().top
}, 500);
}
});
});
try to put it in the same function