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
Related
<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>
<div class="logo-contentBlock">
BLOG
</div>
<div class="logo-contentBlock">
BLOG
</div>
.
.
.
<div id="#logo-first-content">.....</div>
<div id="#logo-second-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);
});
Hello, ı just want scrolltop 60 but ı have 9 content like that that means a lot of jquery. How can i do shorten my code with jquery?
The thing to notice here is that the only thing changing between the callbacks is the CSS-selector. To stay DRY here, I would define a function that takes a CSS-selector and returns the click-handler.
Working off your example, for example like so:
const cbFactory = selector => () => {
$('html, body').animate({
scrollTop: $(selector).offset().top - 60
},5000);
};
$(".content-page-scroll-1").click(cbFactory('#content-first-content'));
$(".content-page-scroll-2").click(cbFactory('#content-second-content'));
$(".content-page-scroll-3").click(cbFactory('#logo-thirt-content'));
I am building a news feed style page that will automatically scroll to the bottom, then wait and refresh the page and repeat the process.
The automatic reload is not working at the moment, and it is starting to bug me.
any help is greatly appreciated.
The Scrolling part works great
My code currently
<script language="javascript" type="text/javascript">
function scrolll() {
time = $('.message').length*3000;
$("html, body").animate({ scrollTop: 0 }, 0);
$("html, body").animate({ scrollTop: $(document).height() }, time,0, function() {location.reload; });
;
}
</script>
you can use
location.reload();
or
window.location.href = window.location.href;
but I think your problem with time,0
$("html, body").animate({ scrollTop: $(document).height() }, time, function() {location.reload(); });
and if I understood you can use setTimeout()
$("html, body").animate({ scrollTop: $(document).height() }, 100, function() {
setTimeout(function() {
location.reload();
}, time)
});
DEMO
First, try changing
location.reload;
to
location.reload(true);
(which will also avoid using the page cache on reload (ref)).
Next, consider the animate signature:
.animate( properties [, duration ] [, easing ] [, complete ] )
In your animation you are passing 0 as the easing name
.animate({...}, time, 0, function() ...
which will prevent the animation from starting. Either omit this altogether, or pass in a valid easing name such as "linear". See here for easing function names if you are interested.
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);
});
});
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)