Implementing an auto scroll function that activates when the user scrolls beyond 300px is fairly simple. Below is a basic script for achieving this:
var canScroll = true;
$(window).scroll(function () {
var currentPosition = $(document).scrollTop();
console.log(currentPosition);
if(currentPosition > 300 && currentPosition < 400 && canScroll == true ) {
canScroll = false;
$('html,body').animate({
scrollTop: $("#scrollTo").offset().top
}, 2000);
}
})
UPDATE
Currently, this feature only works once. To reset the scroll state and allow it to run again, add another conditional statement after the initial one like so:
if (currentPosition > 0 && currentPosition < 300 && canScroll == false) {
canScroll = true;
}
UPDATE
In order to incorporate sound playback, you can utilize the new .play command within the existing IF statement. Here's an example of how to use the .play code:
$('#videoId').get(0).play();
UPDATE
The following code snippet demonstrates the functionality by determining the position of the div instead of setting it manually. You can test it out on JSFiddle - https://jsfiddle.net/3fxcbs2k/3/
var canScroll = true;
$(window).scroll(function (e) {
var currentPosition = $(document).scrollTop();
var startPos = $("#scrollTOO").position();
var finishPos = $("#scrollTo");
if(currentPosition > startPos.top && startPos.top + 100 && canScroll == true ) {
canScroll = false;
$('html,body').animate({scrollTop: finishPos.offset().top}, 2000);
}
if (currentPosition > 0 && currentPosition < 300 && canScroll == false) {
canScroll = true;
}
})
To specify the starting point for scrolling, modify the value of
var startPos = $(" ").position();
And to set the ending position, adjust the value of
var finishPos = $(" ");
Audio
<audio id="sound">
<source src="sound.mp3" type="audio/mpeg">
</audio>
var canScroll = true;
$(window).scroll(function (e) {
var currentPosition = $(document).scrollTop();
var startPos = $("#scrollTOO").position();
var finishPos = $("#scrollTo");
The Jquery play invocation looks like - $('#sound').get(0).play();
You can simply add it to the triggered action, as shown below.
if(currentPosition > startPos.top && startPos.top + 100 && canScroll == true ) {
canScroll = false;
$('html,body').animate({scrollTop: finishPos.offset().top}, 2000);
$('#sound').get(0).play();
}
if (currentPosition > 0 && currentPosition < 300 && canScroll == false) {
canScroll = true;
}
})
If you want to create multiple points, follow these steps
Think of the variables as identifiers that can be referenced later in the code. After the equals sign are their corresponding values. For instance;
var startPos = $("#scrollTOO").position();
startPos is the unique variable name, and its value is derived from the position of the div with the ID 'scrollTOO'.
To introduce more start and end points, you'll need to declare additional variables. One for each start and end point. For example;
var startPos = $("#scrollTOO").position();
var finishPos = $("#scrollTo");
var startPos2 = $("#point2").position();
var finishPos2 = $("#pint2");
Then, include another if statement for each point, replacing the start and end points accordingly,
if(currentPosition > startPos2.top && startPos2.top + 100 && canScroll == true ) {
canScroll = false;
$('html,body').animate({scrollTop: finishPos2.offset().top}, 2000);
Since it currently triggers only once, you'll have to create separate scroll variables for each point.
var canScroll = true;
var canScroll2 = true;
var canScroll3 = true;
var canScroll4 = true;
Each respective if statement should refer to the corresponding scroll variable, for example, the second if statement would appear as follows:
if(currentPosition > startPos2.top && startPos2.top + 100 && canScroll2 == true ) {
canScroll2 = false;