Onload animate and delay - javascript

I have 3 divs and I want after the page loads delay 0.5 then scroll to second div delay 0.5 then scroll to 3rd div. but my problem is I cannot get it to auto scroll to any of the divs
<div id="mydiv">Content</div>
<div id="mydiv2">Content2</div>
<div id="mydiv3">Content3</div>
$(window).on('load', function () {
$('html, body').animate({
scrollTop: $("#myDiv2").offset().top
}, 2000);
$('html, body').animate({
scrollTop: $("#myDiv3").offset().top
}, 3000);
});

Looks like you just have a typo. You had $("#myDiv2") vs $("#mydiv2"). Also use $(document).ready() instead.
$(document).ready(function(){
$('html, body').animate({
scrollTop: $("#mydiv2").offset().top
}, 2000);
$('html, body').animate({
scrollTop: $("#mydiv3").offset().top
}, 3000);
});
jsFiddler

You onload event isn't valid try this universal onload from Jquery :
$(document).ready(function () { ... add you code here ... });

Your problem is in your HTML. Your divs are mydiv with a lower case 'D', but you are referencing #myDiv with an uppercase 'D'.

Related

Make Auto and Manual ScrollTop() works without conflicts

I'm doing scrolltop when the document is ready, that's work, but I'm giving the same script to a div to make the scroll manual. The problem is, if I use the auto-scroll, the manual scroll doesn't work.
Manual scroll
$("#flecha-inscripciones").click(function() {
$('html, body').animate({
scrollTop: $("#formInscripciones").offset().top
}, 2000);
});
With:
<div id="flecha-inscripciones"><img src="https://residenciarucab.es/img/arrow-down.png" alt="Baja para ver" title="Baja para ver"></div>
Autoscroll:
$( document ).ready(function() {
$('html, body').delay(5000).animate({
scrollTop: $("#formInscripciones").offset().top
}, 1100);
});
You can see example here.
It only works the auto-scroll because the manual scroll has conflict.
Solved with queue: false; after the code.
Put below code at end of your, but before that include jquery.js file
$.noConflict();
jQuery(document).ready(function($){
$("#flecha-inscripciones").click(function() {
$('html, body').animate({
scrollTop: $("#formInscripciones").offset().top
}, 2000);
});
$('html, body').delay(5000).animate({
scrollTop: $("#formInscripciones").offset().top
}, 1100);
});

html page is stopping on scroll

I'm using the code below and it's slowing down and stopping at a different div.
$("#btn").click(function() {
$('html, body').animate({
scrollTop: $("#footer_1").offset().top
},2000);
});
Even if I use this code:
$("#btn").click(function() {
$('html, body').animate({
scrollTop: $("#footer_1").offset().top
});
});
It goes to the div but there's an offset and when I click "btn" again then it goes to the complete div .
How can I make it work with a smooth scroll?

How to scroll according to our needs

I have a fixed header which makes a small amount of div behind the header. So I want to scroll to the #services div but with -100px scroll and the following code is what I am currently using. How would I go about subtracting 100px in the following lines of code:
$(".menu-services").click(function() {
$('html, body').animate({
scrollTop: $("#services").offset().top
}, 2000);
});
Use following code:
$(".menu-services").click(function() {
$('html, body').animate({
scrollTop: $("#services").offset().top - 100
}, 2000);
});
And to make it more dynamic, let us say that your header id is fixed-header then you can write:
$(".menu-services").click(function() {
$('html, body').animate({
scrollTop: $("#services").offset().top - $('#fixed-header').outerHeight()
}, 2000);
});

How to move the page up each time to a div

I am creating a form where i have many child forms to submit,so i have used a jQuery functionality where each submit a msg will show at the top of the page ,now what i want,on each submit the page will scroll up to the div where that jQuery is calling .Here is my code
var url = "<%=addPersonalDetailsURL%>";
var type = "addPersonalDetails";
if(!($('#<portlet:namespace/>address1').val()=='' || $('#country').val()=='None' ||$('#<portlet:namespace/>primaryPhone').val()=='')){
jQuery.getJSON(url+"&address1="+address1+"&address2="+address2+"&country="+country+"&state="+state+"&city="+city+"&zip="+zip+"&skypeId="+skypeId+"&twitter="+twitter+"&primaryPhone="+primaryPhone+"&secondaryPhone="+secondaryPhone+"&type="+type, function(data) {
$('html, body').animate({
scrollTop: $(".success").offset().top
}, 800);
for(var z=0; z<data.applicationArray.length;z++){
applicationArray = data.applicationArray[z].split("$$##$$##");
address1 = applicationArray[0];
address2 = applicationArray[1];
city = applicationArray[2];
primaryPhone = applicationArray[3];
}
jQuery.getJSON is giving some result where on the basis i have to use that functionality.So can you tell how i should modify your solution
You should need to get your element's top position in the page and move the scroll to that position. Something like the code below:
jQuery(window).scrollTop(jQuery(".success").offset().top);
Note that the code above will move to the first .success position. If you have to reference a specific one, add the index in the selector, for example:
jQuery(window).scrollTop(jQuery(".success:eq(1)").offset().top);
You can do that with this function:
$("button").click(function () {
$('html, body').animate({
scrollTop: $(".whichElement").offset().top
}, 800);
});
Explanation:
If the button is clicked, we scroll the page to the element with class
whichElement and the duration of the scroll is 800ms.
Example:
$(".first-hey").click(function () {
$('html, body').animate({
scrollTop: $(".second-hey").offset().top
}, 800);
});
$(".second-hey").click(function () {
$('html, body').animate({
scrollTop: $(".third-hey").offset().top
}, 800);
});
$(".third-hey").click(function () {
$('html, body').animate({
scrollTop: $(".first-hey").offset().top
}, 800);
});
.divide {
height: 1300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="first-hey">First hey</button>
<div class="divide"></div>
<button class="second-hey">Second hey</button>
<div class="divide"></div>
<button class="third-hey">Third hey</button>

ScrollTop to element - 20px

I'm trying to make a scrollTop to my div element, but not exactly where it is. I want
to go 20px before my div element. I think i can explain better showing my code for you:
HTML:
<div id="arrow-down">Click here and go to content!</div>
<div id="content">The content is here!</div>
JQuery:
I already have a code that is working fine, but i want to make it diference.
$(document).ready(function() {
$('#arrow-down').click(function() {
$('html, body').animate({
scrollTop: $("#content").offset().top
}, 800);
});
});
This code takes me to the div#content, but i want to go 20px from the top of this!
Something like that:
$(document).ready(function() {
$('#arrow-down').click(function() {
$('html, body').animate({
scrollTop: $("#content" - 20px).offset().top
}, 800);
});
});
Well, i dont know if its look confused... I hope u guys can help me!
You can do this:
$('html, body').animate({
scrollTop: $("#content").offset().top - 20
}, 800);
$(document).ready(function() {
$('#arrow-down').click(function() {
$('body').animate({
scrollTop: $("#content").offset().top-20
}, 800);
});
});
try this

Categories