Develop Reference

Scroll to a div after a few seconds

I am trying to smooth scroll to a div after about a minute on a page. I looked on here and found this answer but it did not help me as the person who gave the answer didn't really answer the person's question.
I'd prefer to use jQuery but I am open to JavaScript as well.
Here is what I have so far:
$(document).ready(function() {
$('body').delay(5000)
.animate({
'scrollTop': $('#usp').offset().top
}, 5000);
});

You can use Something like this which is quite easy.
Just Create a function with some name and call it after few seconds.
$(document).ready(function() {
function scrolltodiv(){
$('html, body').animate({
scrollTop: $("#myDiv").offset().top
}, 2000);
}
window.setTimeout( scrolltodiv, 5000 );
});

I hope this helps:
( function($){
setTimeout( function() {
$('html, body').animate({
scrollTop: $("#elementID").offset().top
// you can use $(".elementClass") but as ID should be unique, it would be better to use an element ID instead of classes
}, 2000);
// 2000 ms is the animation duration
}, 5000)
// it scrolls to #elementID after 5000 ms = 5 secs
} )(jQuery);

$(function(){
setTimeout(function(){
animate("#idorclass" ,2000)
}, 5000)
})
const animate = (idorclass, animval)=>{
$('html, body').animate({
scrollTop: $(idorclass).offset().top
}, animval);
}
also dynamic function that you can reuse

Scroll left with animation won't work anymore

I have this :
var box = document.getElementById('scroller');
box.animate( { left: '+=350' }, 1000);
Which will scroll back to zero just fine.
I would like to animate it, tried :
box.animate( { scrollLeft: '+=350' }, 1000);
$('scroller').animate({ scrollLeft: 0 }, 500);
None works no matter what number I put there.

Basic mistake in syntax
$('scroller').animate({ scrollLeft: 0 }, 500);
it should be
$('#scroller').animate({ scrollLeft: 0 }, 500);

jQuery flash an element onclick and after scroll

So I have the following code:
$("#btn1").click(function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#div").offset().top
}, 2000);
$("#div").addClass("flash");
setTimeout( function(){
$("#div").removeClass("flash"), 1000;
}, 1000);
});
When I click on the button it will scroll down to the div and flash its color (flash class). But what if the div is at the bottom of the page? I need the ode above to be changed so that the scrollTop is executed first AND is finished and then execute the next piece of code (the addClass and the setTimeout function). I assume I need to add a delay? Or something that checks whether the function is complete and if so, start the next one?

I think what you're looking for is animation callback. It's the forth parameter to the .animate() method: http://api.jquery.com/animate/
So in your case it would look like this:
$("#btn1").click(function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#div").offset().top
},
2000,
'swing',
function () {
$("#div").addClass("flash");
setTimeout( function(){
$("#div").removeClass("flash"), 1000;
}, 1000);
});
});
Btw. it's a good practice to cache a jQuery selectors for optimisation (jQuery won't be searching the DOM for the queried nodes, and running the its constructor function each time).
I also refactored this code a bit for readability and to separate the flashing functionality, so you can either use it conveniently in such callbacks (in which case the function will get the animated element as this object, or just run it directly, passing it any jQuery element (e.g. flash($('.anything')))
$("#btn1").click(function(event) {
event.preventDefault();
$div = $('#div');
$('html, body').animate({
scrollTop: $div.offset().top
}, 2000, 'swing', flashElement});
});
function flashElement(element) {
element = element || this;
element.addClass("flash");
setTimeout( function(){
element.removeClass("flash"), 1000;
}, 1000);
}

You just need a callback...
$("#btn1").click(function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#div").offset().top
}, 2000, function(){
$("#div").addClass("flash");
setTimeout( function(){
$("#div").removeClass("flash"), 1000;
}, 1000);
});
});

jQuery window width conditional not working

I'm having a bit of trouble with adjusting the code according to window width. If the window width is less than 450, I want it to scroll to a certain part, else another. Where am I going wrong?
$('.artist-kina').click(function( e ){
e.preventDefault();
$('html, body').animate({
if ($(window).width() < 450 {
scrollTop: $('#artists').offset().top - 60
}
else {
scrollTop: $('#artists').offset().top - 115
}
}, 500);
$('.artists-home').fadeOut(function() {
$('.kina-gallery').fadeIn('slow');
});
});

The parenthesis was a problem, but in a larger sense the syntax is just completely wrong:
$('html, body').animate({
scrollTop: $("#artists").offset().top - (
$(window).width() < 450 ? 60 : 115
)
}, 500);
You can't just drop an if statement into the middle of an object literal. You can, however, use the ? : operator to make a choice between values as part of an expression.
Now be aware that fooling around with the scroll position of the <body> may or may not work in all browsers. Safari used to have a problem with that; it may work in more modern versions of the browser.

There were several issues with the way that you nested the code, but the largest issue was the Animate call.
This should work:
$('.artist-kina').click(function( e ){
e.preventDefault();
if ($(window).width() < 450) {
$("html, body").animate({
scrollTop: $('#artists').offset().top-60
}, 500);
}
else {
$("html, body").animate({
scrollTop: $('#artists').offset().top-115
}, 500);
}
$('.artists-home').fadeOut('slow', function() {
$('.kina-gallery').fadeIn('slow');
});
});
Here is a working jsFiddle: http://jsfiddle.net/yy1v940u/5/

Selection and focus on element of webpage not working (offset)

My question is a little tricky to explain, but I will try anyway. I have two horizontal tabs which, when you click on them, open a text box content. I'm trying to "focus" on them when they get clicked on. I've found a lot of material online but nothing works except for this code I'm showing below:
$(".accordionButton").click(function() {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 500);
});
$(".accordionButtonone").click(function() {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 500);
If I only click on the first accordionButton it works. If I click on the second accordionButton for first, it works. If I click on the first accordionButton after I've clicked on the second it works, but if I click on the second accordionButton after I click on the first it doesn't work: the focus remains at the bottom of the page. I don't know what could be the problem, I'm making some attempt with the animate function (jQuery tutorial) and the offset function (jQuery tutorial) but I would be grateful even only to know what is going wrong...
UPDATE: a partial solution is
$(".accordionButton").click(function() {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 500);
});
$(".accordionButtonone").click(function() {
$('html, body').scrollTop(0);
});

$(".accordionButton").click(function() {
$('html, body').animate({
scrollTop: $(this).nextAll('div .accordionContent').offset().top
}, 500);
});
$(".accordionButtonone").click(function() {
$('html, body').animate({
scrollTop: $(this).nextAll('div .accordionContentone').offset().top
}, 500);
})
You have to put all that into a callback
$('.accordionContent').slideUp('normal', function(){
$(".accordionButtonone").click(function() {
$('html, body').animate({
scrollTop: $(this).nextAll('div .accordionContentone').offset().top
}, 500);
})
});

The solution is NOT elegant, but it works:
$(".accordionButton").click(function() {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 10);
});
$(".accordionButtonone").click(function() {
$('html, body').scrollTop(458);
});

You are making it scroll down by using offset. remove the offset and it will stop scrolling down. also, instead of using individual selectors, why don't you write some code that utilizes jquery's 'this'
$(this)