Make Auto and Manual ScrollTop() works without conflicts - javascript

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

Related

Onload animate and delay

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'.

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?

Screen flashes before scrolling

I used jQuery to load a new page and scroll to a specific div. Everything worked perfectly but I have a small problem. Every time the link opens right before it scrolls there is a flashing.
Here is the code:
<a id="about1" href="Main.html#aboutSection" alt="About"> ABOUT </a></li>
here is the script:
$(document).ready(function() {
$('html, body').hide();
if (window.location.hash) {
setTimeout(function() {
$('html, body').scrollTop(0).show();
$('html, body').animate({
scrollTop: $(window.location.hash).offset().top
- 86}, 1000)
}, 0);
} else {
$('html, body').show();
} )};
I hope was clear enough.
Thanks guys.
P.S: I am new to web programming. This code is not mine.
You are seeing a blink because you are hiding all your contents with:
$('html, body').hide();
Is there a reason you want to hide the whole page? If not you can just try the following
$(document).ready(function() {
if (window.location.hash) {
$('html').animate({
scrollTop: $(window.location.hash).offset().top
- 86}, 1000);
}
});

Stop the smooth scroll with mouse wheel

I have this code so that when a URL is clicked, the view will be scrolled to that particular div (same page) smoothly.
However, I have encountered something buggy.
So let say I clicked the URL, and it is now scrolling smoothly to the bottom of the page. However, when I tried to use my mouse wheel to stop the smooth scrolling but it didn't work. Instead, it gives me that kinda buggy look.
Here's the code
Please advice
<script>
$('a').click(function(e){
$('html, body').stop().animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 1500);
return false;
});
</script>
Add event handlers to the window for wheel and mousewheel events, and in their handlers call $("html, body").stop()
Try this
<script>
$('html, body').bind('mousewheel', function(e){
$(this).stop();
});
$('a').click(function(e){
$('html, body').stop().animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 1500);
return false;
});
</script>
Maybe the issue is that you are not using document ready function.
Try this:
<script>
$(document).ready(function () { // <-- this
$('a').click(function(e){
$('html, body').stop().animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 1500);
return false;
});
});
</script>

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