autoscroll jquery with infinite scroll loop - javascript

I have a page that I would like to have it auto scroll as soon as the full page is loaded, scroll to the bottom and basically automatically loop to the start of the page (essentially loading the same page underneath it) to make it an infinite loop. I have the following script with does this but it breaks after a few scroll top/bottom. So far I'm using jQuery to help. I found this snippet on another StackOverflow post but cannot find it.
function scroll(element, speed) {
element.animate({ scrollTop: $(document).height() }, speed,'linear', function() {
$(this).animate({ scrollTop: 0 }, 3000, scroll(element, 4000));
});
}
setTimeout(function() {
scroll($('html, body'), 900000)
}, 3000);

I was able to solve it using a more simple method:
window.onload = function () {
var Delay = $(document).height() * 65;
var DelayBack = $(document).height() * 5;
function animateBox() {
$('html, body')
.animate({scrollTop: $(document).height()}, Delay, 'linear')
.animate({scrollTop: 0}, DelayBack, animateBox);
}
setInterval(animateBox, 100);
}

I feel like your issue is related to this line...
$(this).animate({ scrollTop: 0 }, 3000, scroll(element, 4000));
Try changing it to the following to make it a callback and not an immediate invocation:
$(this).animate({ scrollTop: 0 }, 3000, function(){ scroll(element, 4000); });

fetch data using php and ajax apply scroll function to window event
$(document).ready(function(){
$(window).scroll(function(){
var lastID = $('.load-more').attr('lastID');
if ($(window).scrollTop() == $(document).height() - $(window).height() && lastID != 0){
$.ajax({
type:'POST',
url:'getdata.php',
data:'id='+lastID,
beforeSend:function(html){
$('.load-more').show();
},
success:function(html){
$('.load-more').remove();
$('#postList').append(html);
}
});
}
});
});

Related

Create JS chrome snippet to auto scroll page up and down in infinite loop

I need to show content of Jira dashboard on screen and scroll it up and down automaticly inside infinite loop.
I tried to create Chrome Snippet but for/while loops seems not work.
function scroll(speed) {
$('html, #ghx-pool').animate({ scrollTop: $(document).height() - $(window).height() }, speed, function() {
$(this).animate({ scrollTop: $(document).height() }, speed);
});
}
while(true){
setInterval(scroll(25000), 10);
}

How to call reload after animation in JQuery

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.

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.

Why does scrollTop only scrolls half way down?

I have an error on a jQuery snippet and I am no jQuery expert. I have a scrolling div which will auto scroll with the following function.
// When DOM is fully loaded
jQuery(document).ready(function ($) {
function scroll(speed) {
$('.shooter-scroller').animate({
scrollTop: $(document).height() - $('.shooter-scroller').height()
}, fast, function () {
$(this).animate({
scrollTop: 0
}, speed);
});
}
speed = 15000;
scroll(speed)
setInterval(function () {
scroll(speed)
}, speed * 2);
});
I need to do 2 things with this script but would LOVE some help if people can help at all.
For some reason the scrolling stops halfway down the div and doesnt show all the content in the div and I would like to get the scroll to reset back to the top of the content once it has got to the bottom. Is this possible at all?
Any help would be amazing!
Fiddle: http://jsfiddle.net/andysimps1985/gn1a2kn7/1/
Thanks in advance.
You need to change
$(document).height() - $('.shooter-scroller').height()
to
$('.shooter-scroller').prop('scrollHeight')
That will give you the correct height.
See this jsfiddle (note: I changed the speed for a clearer result)
To get to the bottom you have to give the scrollTop as the element's height.
// When DOM is fully loaded
jQuery(document).ready(function ($) {
function scroll(speed) {
$('.shooter-scroller').animate({
scrollTop: $('.shooter-scroller').prop("scrollHeight")
}, fast, function () {
$(this).animate({
scrollTop: 0
}, speed);
});
}
speed = 15000;
scroll(speed)
setInterval(function () {
scroll(speed)
}, speed * 2);
});
This gets the scroll height.

Categories

Resources