We Keep Coding

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

Smooth scroll to top not working

I am using the to top arrow in website to move to the top section with smooth scroll.. Now its moving to top but not moving in smooth..
The js that i used to get smooth scroll was
$(function() {
$('a.page-scroll').bind('click', function(event) {
console.log("scroll");
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
BUt its not working..
The jsfiddle was https://jsfiddle.net/36m5kp00/
The jquery's that i have used was,
<script src="scripts/controllers/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Use this
$(function() {
$('a.page-scroll').bind('click', function(event) {
$("html, body").animate({ scrollTop: 0 }, 1500);
event.preventDefault();
});
});

Actually you need to add the jquery easing plugin if you want to use custom easing methods like easeInOutExpo.
Note: jQuery comes with 2 easing methods linear & swing. Reference here: https://api.jqueryui.com/easings/
Here you can get it from: https://cdnjs.com/libraries/jquery-easing
It works well, Check it here: https://jsfiddle.net/ashishanexpert/36m5kp00/4/
Your working code should be like:
$(window).scroll(function() {
if ($(this).scrollTop()) {
$('#letTop:hidden').stop(true, true).fadeIn();
} else {
$('#letTop').stop(true, true).fadeOut();
}
});
$(function() {
$('a.page-scroll').bind('click', function(event) {
console.log("scroll");
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});

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

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

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