Develop Reference

Automating scrolling animations in jQuery

I am using jQuery to create a smooth animation from a link to a div.
$("#link").click(function() {
$('html, body').animate({
scrollTop: $("#portfolio").offset().top
}, 1000);
});
Since I am using this more than a couple times, I don't want to hard-code in the ids for each element. How could I automatically put the id in the stop that says "#link", and put the href ("#portfolio") of that id into the portfolio spot.

I would add a common class (instead of individual id's) to each element to which you want to have this click event attached. Then you could do something along the lines of:
$('.click-event-class').click(function() {
var href = $(this).attr('href');
$('html, body').animate({
scrollTop: $(href).offset().top
}, 1000);
});

JavaScript scroll to anchor

Having some problems with JavaScript / jQuery.
We're currently using a "shortcode" from Visual Composer (WordPress plugin) that creates (horizontal) tabs. We'we made some custom changes, but only visually (images/css).
We're trying to make it so that when you click on a tab you automatically scroll down to the content.
I've tried wrapping the script in
jQuery(document).ready( function({});
jQuery(window).ready( function({});
and also tried replacing .ready() with .load()
jQuery(".pws_tabs_controlls_item").children().click(function(){
jQuery('html, body').animate({
scrollTop: jQuery(".ts-fancy-tabs-container").offset().top
}, 700, 'swing', function () {});
});
However! If you copy the entire script and paste it in the Console in Chrome/Firefox it will work as intended, based on that I'd say that the script it self works, it feels like it's not loading or registering or w/e.
Is there any (obvious) problem/mistake we've made?
I'd be happy to provide additional information if neccessary (e.g. the website address)
Any help would be greatly appreciated!

The VisualComposer plugin renders only after the document is ready, and that's why it's not working.
The best way to solve your problem is by using jQuery's event delegation, e.g:
jQuery(document).on('click', '.pws_tabs_controlls_item > a', function() {
jQuery('html, body').animate({
scrollTop: jQuery(".ts-fancy-tabs-container").offset().top
}, 700, 'swing', function () {});
});
UPDATE
After your comment, I can see that the anchor tags inside your .pws_tabs_controlls_item elements already have a click event listener, and it also uses event.stopPropagation(), so my code above will never be executed.
The other way to solve your problem, is by dirty-checking when the element is available, e.g:
function waitForAvailability(selector, callback) {
if (jQuery('selector').length === 0) {
callback();
}
else {
setTimeout(function() {
waitForAvailability(selector, callback);
}, 0);
}
}
And then, you can use the code you were already using, something like that:
waitForAvailability('.pws_tabs_controlls_item', function() {
jQuery(".pws_tabs_controlls_item").children().click(function(){
jQuery('html, body').animate({
scrollTop: jQuery(".ts-fancy-tabs-container").offset().top
}, 700, 'swing', function () {});
});
});

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);
});

How to animated/smooth scroll to div using scrolltop

Can someone help me turn my code into one that will animate the scroll. I've been researching and trying to do it myself but I'm obviously not doing something correctly.
Here is my JS:
$(function() { //When the document loads
$(".jrm-menu-whyus > a").bind("click", function() {
$(window).scrollTop($("#menu-jrm").offset().top);
return false;
});
});
Thanks!
It works fine, just want to animate the scroll.

Use jQuery.animate():
$("html, body").animate({scrollTop: $("#menu-jrm").offset().top});
jQuery.animate documentation

Trigger $(window).scroll();

When I call $("body").animate({scrollTop: someValue}); I want $(window).scroll(function() { }); to be called too. How can I achieve that?
I have tried with $(window).trigger("scroll") and $(window).triggerHandler("scroll") without success.
The code
EDIT:
Problem solved. There was an if in my $(window).scroll(function() { }); that caused the problem.

Just use:
// Trigger the scroll event
$(window).scroll();
Source:
http://www.w3schools.com/jquery/event_scroll.asp
https://api.jquery.com/scroll/

Apply it to both body and html as it is not consistent.. (for example, FF uses the html for scrolling while chrome uses the body)
$("html, body").animate({scrollTop: someValue});
demo at http://jsfiddle.net/vzyVh/

You can try below code - here i am scrolling to top of my div tag which has id "one".
$('html,body').animate({ scrollTop: $('#one').offset().top }, 'slow');