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

On click,redirect to a new page and scroll to a particular div on that new page

Requirement : I want to redirect to a new page on click of a button and then I want to scroll to a particular section on the new page.
Issue :
This is how I'm currently redirecting
<div class="button know-more-btn">
<a href="/about-us#Who-We-Are" target="" class="btn-link btn-small">
KNOW MORE</a>
</div>
Now once it redirects on click of the button,I want it to to scroll to a particular section on the new page.
I'm currently trying to achieve this scenario with the below code :-
$('.know-more-btn').click(function () {
if(location.hash == "#Who-We-Are"){
$('html, body').animate({
scrollTop: $(".map-section").offset().top
}, 1000);
}
});
So on click of the know-more-btn,it should check the location.hash and scroll to the map-section div class on the new page.
But it only redirects and does not scroll to the desired section.
Please help me solve this issue.

Your code:
$('.know-more-btn').click(function () {
if(location.hash == "#Who-We-Are"){
$('html, body').animate({
scrollTop: $(".map-section").offset().top
}, 1000);
}
});
New code:
if(location.hash == "#Who-We-Are"){
$('html, body').animate({
scrollTop: $(".map-section").offset().top
}, 1000);
$('.know-more-btn').click(function () {
if(location.hash == "#Who-We-Are"){
$('html, body').animate({
scrollTop: $(".map-section").offset().top
}, 1000);
}
});

this jquery/javascript code will help you
function hashchanged(){
if(location.hash.substr(1)!='') $('html,body').animate({ scrollTop: ($('#'+location.hash.substr(1)).position().top-200) }, 'slow');
}
$(window).on('hashchange', function(e){
hashchanged();
});
hashchanged();
Any question im here.

You don't need jQuery for this, there's a built in method on every HTMLElement called scrollIntoView
Add the following script to your about-us page:
const map = document.querySelector('#Who-We-Are .map-section')
// simulates arriving at #Who-We-Are for the purpose of this example
window.location.hash = 'Who-We-Are';
addEventListener('DOMContentLoaded', event => {
if (window.location.hash === 'Who-We-Are') {
map.scrollIntoView({behavior: "smooth", block: "start"});
}
});
#Who-We-Are {
margin-top: 110vh;
}
.map-section {
margin-top: 20vh;
}
<section id="Who-We-Are">
<h2>Who We Are</h2>
<div class="map-section">Map</div>
</section>

this is my best solution which i had never seen this before. maybe this helpful for you.
below code for the page from that i want to redirect on click a link.
<div ><a onclick="myHash()"></a></div>
this is to redirect to a new page and send hash through url.
function myHash() {
$(document).ready(function () {
window.location.href="contact.html#link"
});
}
}
And On new page which i want open and scroll to the specific div.
<div id="link"></div>
And using url's hash to scroll specific div on new page
$(document).ready(function() {
if (window.location.hash) {
setTimeout(function() {
$('html, body').scrollTop(0).show();
$('html, body').animate({
scrollTop: $(window.location.hash).offset().top
}, 1500)
}, 0);
}
});

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

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