Develop Reference

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);
}

jquery auto scroll website with pause

How can I set jQuery auto scroll web page and with pause / stop for a specific px and continue auto scrolling? It's something like a user scrolling on the web page reading an article, like scroll and stop and continue scrolling something like that. I can't seem to find a good example on the internet and all I got the answer from searching is only jQuery auto scroll example only.
If you can't understand my question it's something looks like this: Example from codepen
Here is my code:
$("html, body").animate({ scrollTop: $(document).height() }, 1000);
setTimeout(function() {
$('html, body').animate({scrollTop:0}, 1000); // 1000 is the duration of the animation
},500);
setInterval(function(){
$("html, body").animate({ scrollTop: $(document).height() }, 500); // Speed from Bottom to top
setTimeout(function() {
$('html, body').animate({scrollTop:0}, 5000); // Speed from Top to bottom
},500); // What is this speed refer to?
},1000); // What is this speed refer to?
By the way, I am new in jQuery, do you mind explain a little bit to me what is the meaning of both of the 500 and 1000 second meaning? I know it refers to second but what is the meaning of adding 2 of it? Thanks!

Here is an working example
setInterval(function scroll() {
$("section").each(function(i, e) {
$("html, body").animate({
scrollTop: $(e).offset().top
}, 500).delay(500); // First value is a speed of scroll, and second time break
});
setTimeout(function() {
$('html, body').animate({
scrollTop: 0
}, 5000); // This is the speed of scroll up
}, 4000); //This means after what time should it begin (after scrolling ends)
return scroll;
}(), 9000); //This value means after what time should the function be triggered again
//(It should be sum of all animation time and delay) 9000 = 5000 + 4000
main {
background: #EEE;
}
main section {
background: #DDD;
width: 90%;
margin: 30px auto;
padding: 10px 15px;
min-height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
<section>
</section>
<section>
</section>
<section>
</section>
<section>
</section>
</main>
EDIT
I edited a little bit snippet so that the code was not twice. I declare function (scroll()) and use it inside interval. Thanks to that there is no need for the same code at the begining.
EDIT2
If you want the scroll to stop depending on px and not section just change this:
setInterval(function scroll() {
$("section").each(function(i, e) {
$("html, body").animate({
scrollTop: $(e).offset().top
}, 500).delay(500); // First value is a speed of scroll, and second time break
});
...
To this:
setInterval(function scroll() {
for (var i = 0; i < 4000; i += 800) {
$("html, body").animate({
scrollTop: i
}, 500).delay(500);
}
...
EDIT3
If you want to scroll to bottom at the end, you can do it like this:
setInterval(function scroll() {
for (var i = 0; i < 4000; i += 800) {
$("html, body").animate({
scrollTop: i
}, 500).delay(500);
if (i + 800 >= 4000) {
$("html, body").animate({
scrollTop: $(document).height()
}, 500).delay(500);
}
}
...

autoscroll jquery with infinite scroll loop

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);
}
});
}
});
});

Scroll-down to the search result page in mobile

I started learning JavaScript a few days ago and I'm enjoying it so far.
Today I've been given a task where I need to add a scroll down function to an element when a button is clicked, but only if the screen width is less than or equal to 699 pixel. I've finished a webpage, and I just need to add the JavaScript for it.
This is the script snippet I have at the moment:
$(document).ready(function (){
$("#button").click(function (){
//$(this).animate(function(){
$('html, body').animate({
scrollTop: $("#searchResult").offset().top
}, 2000);
//});
});
});
And I need to add this:
if (screen.width <= 699)
How do I add the if statement to the script above? Also is there an easier way of doing this?
Thank you very much for your time,

$(document).ready(function (){
var screenWidth = $(window).width();
$("#button").click(function (){
if (screenWidth <= 699){
$('html, body').animate({
scrollTop: $("#searchResult").offset().top
}, 2000);
}
//other stuff your button does on all views
});
});
I recommend setting mobile to 480px and tablet to 768px.

Use this
var width = $(window).width();
if(width < 699) {
//your script
}

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.