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

jQuery - hiding page, scrolling with .animate, then showing the page through .animate's complete function now working

For the site I'm working on I want people to be able to click on a topic, go to that page, then have a button at the bottom of that page which will take them back to where they were browsing before.
The below script did work for that:
$(document).ready(function() {
$('html, body').hide();
if (window.location.hash) {
setTimeout(function() {
$('html, body').scrollTop(0).hide();
$('html, body').animate({
scrollTop: $(window.location.hash).offset().top - 100
}, 100)
}, 0);
}
else {
$('html, body').show();
}
});
However, it's not the nicest UX. When it loads in it either jumps uncomfortably fast to the place I'm trying to get them to or you have to watch it scroll slowly which isn't fun either.
I do have to make it scroll because otherwise it breaks other animations on the page, so I thought I would just hide the entire thing while it's scrolling, then show it or fade it in when it's done.
I wrote the below to do that, and it does hide it, it does show it, and the console log triggers... But it no longer scrolls down to where I want it go.
Any help?
$(document).ready(function() {
$('html, body').hide();
if (window.location.hash) {
setTimeout(function() {
$('html, body').scrollTop(0).hide();
$('html, body').animate({
scrollTop: $(window.location.hash).offset().top - 100
}, 100, function() {
$('html, body').show();
console.log("JHjlkjl");
})
}, 0);
}
else {
$('html, body').show();
}
});

Scroll to hash without name

I try to scroll to a unnamed hash e.g. comment section but no luck
$(document).ready(function () {
console.log('ANC: ' + location.hash);
setTimeout(function() {
$('html,body').animate({
scrollTop: window.location.hash.offset().top
}, 'slow');
}, 200);
});
Opening the link
http://example.com/foo/bar.html#1234567890
does not work with scrolling. I always get
Uncaught TypeError: window.location.hash.offset is not a function
location.href=location.hash;
works just great but no scrolling which is too bad.
Any advice?

hash is just a string. Elements can have offsets, strings don't.
Try:
$('html,body').animate({
scrollTop: $(window.location.hash).offset().top
}, 'slow');

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 scroll does not scroll up

I have this code below and the DEMO fiddle.
jQuery(document).ready(function () {
$(window).scroll(function () {
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000);
});
});
I'm really confused why I can't scroll up? Anybody can explain to me why and please share some solutions you have.
Any help, is very appreciated.

Alright, this should do what you are asking for. I don't think it is very user friendly, but that is up to you.
Demo Fiddle
//this prevents the animate method from running multiple times.
var scrolling = false;
jQuery(document).ready(function () {
$(window).scroll(function () {
if ( $(window).scrollTop() <= 100 && scrolling === false) {
//set to true to prevent multiple scrolls
scrolling = true;
//run the animation
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000, function() {
//when animation is complete, set scrolling to false
scrolling = false;
});
}
});
});

You can't scroll up because your code is wrapped in the scroll() function so it basically locks its position every time you try and scroll with either the mouses scroll wheel or arrow keys. If you amend to the following then it will position itself accordingly when the page first loads.
jQuery(document).ready(function () {
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000);
});

Are you trying to have it animate when the link is clicked? If so you need to change your code:
jQuery(document).ready(function () {
$('a').click(function () {
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000);
});
});
I would probably add a class or ID value to your link so you can target that one specific link. The code above would apply to all links on your page...although right now there is only the one.
<h1>Scroll to the Content</h1>
jQuery(document).ready(function () {
$('.scrollToContent').click(function () {
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000);
});
});

I'm not sure if you will satisfied on this but i found something that can help a little on my problem.
jQuery(document).ready(function () {
$(this).bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta /120 < 1) {
$('html, body').delay(200).animate({
scrollTop: $('#content').offset().top
}, 1000);
}
});
});
DEMO

No need to add the jquery functionality to achieve the requirement that has been asked. Please remove the Jquery code and run the code snippet provided in the fiddle. It is behaving as per the requirement.