Develop Reference

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

jQuery animate change opacity ONLY during animation

I have this jquery command:
$('html, body').animate({
scrollTop: stopY,
opacity: '0.5'
}, 1000);
(where stopY is the position where I want to stop).
The only think is that I would like the opacity changes to 0.5 only during the scrolling and, once I'm in stopY position it goes back to 1.

Supply a complete callback in the animate's options parameter, which sets the opacity back to 1 upon completion of the animation:
var options = {
duration: 1000,
complete: function(){ $('html, body').css('opacity', 1) }
});
$('html, body').css('opacity', 0.5).animate({ scrollTop: stopY }, options)

You can use start option of .animate() to set target element opacity to 0 ; .promise() , .then() ; call .animate() on target element at .then() to set opacity to 1
var stopY = 400, div = $("div");
$("html, body").animate({
scrollTop: stopY
}, {
duration: 1000,
start: function() {
div.css("opacity", 0)
}
}).promise().then(function() {
div.animate({
opacity: 1
}, 500)
})
body {
height: 800px;
}
div {
position: relative;
top: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<body>
<div>scroll to here</div>
</body>

Your current code is animating the opacity as well as the scrollTop. What you need to do is:
$("body").css("opacity",0.5);
$('html, body').animate({
scrollTop: stopY
}, 1000, function () {
if ($(this).is("body")) { //Done is triggered for both html and body, so we limit it to only one of the two triggers
$("body").css("opacity",1);
}
});

Animate scroll left using jquery

Here is the current code I have for clicking buttons and having it scroll through and change a few things.
$(".scroll").click(function(event) {
$('.panel h1').stop().fadeOut(200);
$('.panel p').stop().fadeOut(200);
$(".scroll").css({"background": "none", "color": "#B1B1B1"});
$(this).css({"background": "#00709C", "color": "#fff"});
event.preventDefault();
$('.scroll-menu').stop().animate({
scrollLeft: $('.scroll-menu').scrollLeft() + $(this.hash).offset().left
}, 1200);
$('.panel h1').delay( 900 ).fadeIn(500);
$('.panel p').delay( 900 ).fadeIn(500);
});
I got a little help, so actually I'm confused as to what $(this.hash).offset().left is referring to.
Also, can anyone give me an idea as to how to automatically animate this without an on click? For instance, this does NOT work.
setInterval(function() {
$('.scroll-menu').stop().animate({
scrollLeft: $('.scroll-menu').scrollLeft() + $(this.hash).offset().left
}, 1200);
$('.panel h1').delay( 900 ).fadeIn(500);
$('.panel p').delay( 900 ).fadeIn(500);
}, 3600);

Sure, here you go: http://jsfiddle.net/neuroflux/afzVe/617/
and the relevant code:
$('#scroll').click(function() {
$('html,body').animate({
scrollLeft: $('#test').css('left')
}, 800, function() {
$('html, body').animate({
scrollLeft: 0
}, 800);
});
});

Say you have an anchor tag like one below:
Some anchor
this.hash on anchor click will return "#foo" which is also a valid ID selector. Hence $(this.hash) is the same as $("#foo") and will select the element with ID - foo and $(this.hash).offset().top basically returns top of element #foo
Regarding your 2nd question its quite unclear as to on what instance you want to animate automatically but still in your setInterval since you are referring $(this.hash) and since its not a valid element there you can first try keeping element in variable and then apply the hash functionality like one below:
var elem=$(".scroll");//store it globally
setInterval(function() {
$('.scroll-menu').stop().animate({
scrollLeft: $('.scroll-menu').scrollLeft() + $(elem.hash).offset().left
}, 1200);
$('.panel h1').delay( 900 ).fadeIn(500);
$('.panel p').delay( 900 ).fadeIn(500);
}, 3600);

jQuery window width conditional not working

I'm having a bit of trouble with adjusting the code according to window width. If the window width is less than 450, I want it to scroll to a certain part, else another. Where am I going wrong?
$('.artist-kina').click(function( e ){
e.preventDefault();
$('html, body').animate({
if ($(window).width() < 450 {
scrollTop: $('#artists').offset().top - 60
}
else {
scrollTop: $('#artists').offset().top - 115
}
}, 500);
$('.artists-home').fadeOut(function() {
$('.kina-gallery').fadeIn('slow');
});
});

The parenthesis was a problem, but in a larger sense the syntax is just completely wrong:
$('html, body').animate({
scrollTop: $("#artists").offset().top - (
$(window).width() < 450 ? 60 : 115
)
}, 500);
You can't just drop an if statement into the middle of an object literal. You can, however, use the ? : operator to make a choice between values as part of an expression.
Now be aware that fooling around with the scroll position of the <body> may or may not work in all browsers. Safari used to have a problem with that; it may work in more modern versions of the browser.

There were several issues with the way that you nested the code, but the largest issue was the Animate call.
This should work:
$('.artist-kina').click(function( e ){
e.preventDefault();
if ($(window).width() < 450) {
$("html, body").animate({
scrollTop: $('#artists').offset().top-60
}, 500);
}
else {
$("html, body").animate({
scrollTop: $('#artists').offset().top-115
}, 500);
}
$('.artists-home').fadeOut('slow', function() {
$('.kina-gallery').fadeIn('slow');
});
});
Here is a working jsFiddle: http://jsfiddle.net/yy1v940u/5/

jQuery ScrollTop add to this script

a couple of people kindly helped me yesterday with a jQuery issue on a scrollTop function but I now have another small issue. Below is the fiddle for the js. I need to get the js to bounce the content back to the top instead of scrolling back up to the top.
Here is the JS, fiddle below it.
function scroll(speed) {
$('.shooter-scroller').animate({
scrollTop: $('.shooter-scroller').prop('scrollHeight'),
easing: 'linear'
}, {
duration: speed,
easing: 'linear', // <--- here
complete: function () {
$(this).animate({
scrollTop: 0
}, {
duration: speed,
easing: 'linear', // <--- here
complete: speed
});
}
});
}
speed = 8000;
scroll(speed)
setInterval(function () {
scroll(speed)
}, speed * 2);
});
fiddle
I need the speed to remain as linear but the scroll to reset to the top once it gets to the bottom. Any help would be amazing! Thanks in advance people :)

Here is an updated fiddle: http://jsfiddle.net/tsb5pj49/4/
Instead of animating it back to the top, you can just set the scrollTop to 0 using the same function. Additionally, if you store the setInterval in a variable then you can clear it and start it again when the animation completes and the scrollTop is reset. Like so:
// When DOM is fully loaded
jQuery(document).ready(function ($) {
var speed = 8000,
scrollInterval;
function scroll(speed) {
$('.shooter-scroller').animate({
scrollTop: $('.shooter-scroller').prop('scrollHeight'),
easing: 'linear'
}, {
duration: speed,
easing: 'linear', // <--- here
complete: onScrollingComplete
});
}
function startScrolling() {
scroll( speed );
scrollInterval = setInterval(function () {
scroll(speed)
}, speed * 2);
}
function onScrollingComplete() {
$( this ).scrollTop( 0 );
clearInterval( scrollInterval );
startScrolling();
}
startScrolling();
});
Hope this helps