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

How can i do shorten my code with jquery?

<div class="logo-contentBlock">
BLOG
</div>
<div id="#logo-first-content"></div>
$(".content-page-scroll-1").click(function() {
$('html, body').animate({
scrollTop: $('#content-first-content').offset().top - 60
},5000);
});
$(".content-page-scroll-2").click(function() {
$('html, body').animate({
scrollTop: $('#content-second-content').offset().top - 60
}, 5000);
});
$(".content-page-scroll-3").click(function() {
$('html, body').animate({
scrollTop: $('#logo-thirt-content').offset().top - 60
}, 5000);
});
I have about 9 codes like this way. How can I shorten them? Clicking buttons, they all go to different div.

This will be my purposed solution for the above problem.
<div class="content-page-scroll" data-id="content-first-content"></div>
<div class="content-page-scroll" data-id="content-second-content"></div>
<div class="content-page-scroll" data-id="content-third-content"></div>
.
.
.
<div class="content-page-scroll" data-id="content-n-content"></div>
Here the JS code for the click event.
$(".content-page-scroll").click(function () {
$thisDataId = $(this).data('id');
$('html, body').animate({
scrollTop: $(`#${$thisDataId}`).offset().top - 60
}, 5000);
});
In this way, you sum up this problem with a single JS click event.
Hopefully it may help you to resolve this issue.

I'd create a function like this:
function createScrollClick(elem, location) {
$(elem).click(function() {
$('html, body').animate({
scrollTop: $(location).offset().top - 60
},5000);
});
}
Then either call it the nine times you need to call it for each click you want to set up:
createScrollClick('.content-page-scroll-1', '#content-first-content''), etc.
...or you could put all of those values in an array or object and loop through those values calling the function.

In php:
<script>
<?php
for ($x=1; $x<9; $x++){
echo '$(".content-page-scroll-'.$x.'").click(function() {
$(\'html, body\').animate({
scrollTop: $(\'#content-'.$x.'-content\').offset().top - 60
},5000);
});';
}
?>
</script>

define function then use it as callback

I want to make scroller/slider - I have div's with images covering the whole screen and I want to scroll to them one by one and then get back to the first one.
I'm pretty new to JavaScript and jQuery so I'm aware that it might be a bad approach, but please take a look at this code:
I define a function:
$.slidestuff = function()
{
$(document).ready(function() {
$('html, body').animate({
scrollTop: $(".slide1").offset().top
}, 2000, 'easeInOutBack').delay(3000);
$('html, body').animate({
scrollTop: $(".slide2").offset().top
}, 2000, 'easeInOutBack').delay(3000);
$('html, body').animate({
scrollTop: $(".slide3").offset().top
}, 2000, 'easeInOutBack').delay(3000);
$('html, body').animate({
scrollTop: $(".slide1").offset().top
}, 2000, 'easeInOutBack').delay(3000);
})
}
And then I want to use this function as a callback at the very end of the same code:
$(document).ready(function() {
$('html, body').animate({
scrollTop: $(".slide1").offset().top
}, 2000, 'easeInOutBack').delay(3000);
$('html, body').animate({
scrollTop: $(".slide2").offset().top
}, 2000, 'easeInOutBack').delay(3000);
$('html, body').animate({
scrollTop: $(".slide3").offset().top
}, 2000, 'easeInOutBack').delay(3000);
$('html, body').animate({
scrollTop: $(".slide1").offset().top
}, 2000, 'easeInOutBack').delay(3000, slidestuff);
})
The second code alone (without the callback) works nice, but obviously stops - and when I use one after another, nothing happens. Help highly appreciated!

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)

How to scroll to the particular div using jquery or javascript

I want to scroll to the particular div using jquery
I have written the code like:
$("#button").on('click',function(){
var p = $("#dynamictabstrp");
var offset = p.offset();
window.scrollBy(offset.left, offset.top);
});
But it is not moving to the div position. How can i do that in jquery or javascript

Try this
$("#button").on('click',function() {
$('html, body').animate({
'scrollTop' : $("#dynamictabstrp").position().top
});
});
.scrollTop()

Try
.scrollTop()
$(window).scrollTop($('#dynamictabstrp').offset().top);
or
scrollIntoView()
$('#dynamictabstrp')[0].scrollIntoView(true);
or
document.getElementById('dynamictabstrp').scrollIntoView(true);

Here is the code :-
$(document).ready(function (){
$("#button").on('click',function(){
$('html, body').animate({
scrollTop: $("#dynamictabstrp").offset().top
}, 1000);
});
});
or
$(document).ready(function (){
$("#button").click(function(){
$('html, body').animate({
scrollTop: $("#dynamictabstrp").offset().top
}, 1000);
});
});

Try this simple script. Change #targetDiv with your particular div ID or Class.
$('html,body').animate({
scrollTop: $('#targetDiv').offset().top
}, 1000);
The source code and live demo can be found from here - Smooth scroll to div using jQuery

You can set offset as per requirement
jQuery(document).ready(function(){
function secOffset(){
jQuery('html, body').animate({
scrollTop: jQuery(window.location.hash).offset().top - 60
}, 0);
}
});