We Keep Coding

Back to top button not working on other page change

I have added the Scroll Back To Top Button in my base (index.html) template and it's working perfectly. But when I go to any other pages, the button won't work.
Can anybody figure out what's wrong?
Here is my index.html go-to-top template, and I put the same code to other page:
<div class="go-top">
<i class="fas fa-chevron-up"></i>
</div>
main.js
$(document).ready(function () {
$(function () {
// Scroll Event
$(window).on("scroll", function () {
var scrolled = $(window).scrollTop();
if (scrolled > 400) $(".go-top").addClass("active");
if (scrolled < 400) $(".go-top").removeClass("active");
});
// Click Event
$(".go-top").on("click", function () {
$("html, body").animate({ scrollTop: "0" }, 500);
});
});
});```

Show button when scroll up [JS]

I would like to show the button when scroll up. My current script doing this but I have to scroll to the top, and then the button appears. Is there any possible to show the button just shortly after I scrolling up the page?
<script>
function showButton() {
var button = $('#my-button'), //button that scrolls user to top
view = $(window),
timeoutKey = -100;
$(document).on('scroll', function() {
if(timeoutKey) {
window.clearTimeout(timeoutKey);
}
timeoutKey = window.setTimeout(function(){
if (view.scrollTop() > 10) {
button.fadeOut();
}
else {
button.fadeIn();
}
}, 10);
});
}
$('#my-button').on('click', function(){
$('html, body').stop().animate({
scrollTop: 10
}, 10, 'linear');
return false;
});
//call function on document ready
$(function(){
showButton();
});
</script>

You should use offset().top instead of scrollTop()

jQuery click event not running on first click. (go to top of page action)

As described in the title, here's the code. It won't work on the first click after refresh of page.
$(document).ready(function () {
//Check to see if the window is top if not then display button
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#myBtn').fadeIn();
} else {
$('#myBtn').fadeOut();
}
});
});
function topFunction() {
//Click event to scroll to top
$('#myBtn').click(function () {
$('html, body').animate({ scrollTop: 0 }, 200);
return false;
});
}

$(document).ready(function () {
//Check to see if the window is top if not then display button
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#myBtn').fadeIn();
} else {
$('#myBtn').fadeOut();
}
});
//Click event to scroll to top
$('#myBtn').click(function () {
$('html, body').animate({ scrollTop: 0 }, 200);
return false;
});
});

Checkout this,
You had not triggered your topFunction on ready.
$(document).ready(function () {
topFunction();
//Check to see if the window is top if not then display button
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#myBtn').fadeIn();
} else {
$('#myBtn').fadeOut();
}
});
});
function topFunction() {
//Click event to scroll to top
$('#myBtn').click(function () {
$('html, body').animate({ scrollTop: 0 }, 200);
return false;
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p>
<p>
<button id="myBtn" onclick="topFunction"> ScrolTop </button>
test</p>
<p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>

Only had to take out click function outside the other function.

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

JQuery stop element from fading back in

I've made this little snippet to scroll the window to the top of the page.
$(window).scroll(function(){
$("#scrollup").fadeIn("slow");
});
$("#scrollup").click(function(){
$('html, body').animate({ scrollTop: 0 }, 'normal', function() {
$("#scrollup").fadeOut("slow");
});
});
However, when the scrollup div fades out after the window scrolls, it fades back in. How do I stop this from happening? Thanks.
I think I have found a reasonable solution
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
Would this be easier than changing my original code?

Check out .stop(): http://api.jquery.com/stop/
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').stop().fadeIn();
} else {
$('.scrollup').stop().fadeOut();
}
});

You should make sure that the scrollup div isn't faded in when you are at the top or when it is already faded in ( visible )
$(window).scroll(function(){
if ( $(window).scrollTop() !== 0 or $("#scrollup").is(":hidden") ) then {
$("#scrollup").fadeIn("slow");
}
});

You could just add an if statement to check if it is at the top:
$(window).scroll(function(){
if($("body").scrollTop()!=0)
$("#scrollup").fadeIn("slow");
});
$("#scrollup").click(function(){
$('html, body').animate({ scrollTop: 0 }, 'normal', function() {
$("#scrollup").fadeOut("slow");
});
});​