I have a button that if is pressed, the page scroll to top.
But i want the scroll id made by an animation, can you help me? PS. i prefer javascript than jquery. Thanks.
window.onscroll = function() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
};
window.onload = function() {
document.getElementById("myBtn").onclick = function() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
}
This is my current javascript.
Try this:
window.onload = function() {
document.getElementById("myBtn").onclick = function() {
window.scroll({
top: 0,
behavior: "smooth"
});
}
}
Related
I followed w3 schools guide on how to make a scroll back top top button in your html with javascript. When I put the javascript and html where they should be one of the javascript function didn't work. It got greyed out in vscode and in chrome console it says that the "function is not defined".
This is how it looks in vscode:
I tried rewriteing the code in the html and js but with no luck. I also tried writeing a new function under the "topFunction" function and that also gets greyed out so I don't know whats seems to be the problem.
And this is the whole javascript with html:
https://jsfiddle.net/md5pf3hx/ a jsfiddle with the whole site
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
//Get the button:
mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function () {
scrollFunction();
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
You can't access topFunction because it's declared inside loadScript function.
You need to remove loadScript function
const slider = document.querySelector(".slider");
const nextBtn = document.querySelector(".next-btn");
const prevBtn = document.querySelector(".prev-btn");
const slides = document.querySelectorAll(".slide");
const numberOfSlides = slides.length;
var slideNumber = 0;
//image slider next button
nextBtn.addEventListener("click", () => {
slides.forEach((slide) => {
slide.classList.remove("active");
});
slideNumber++;
if (slideNumber > numberOfSlides - 1) {
slideNumber = 0;
}
slides[slideNumber].classList.add("active");
});
//image slider previous button
prevBtn.addEventListener("click", () => {
slides.forEach((slide) => {
slide.classList.remove("active");
});
slideNumber--;
if (slideNumber < 0) {
slideNumber = numberOfSlides - 1;
}
slides[slideNumber].classList.add("active");
});
//image slider autoplay
var playSlider;
var repeater = () => {
playSlider = setInterval(function() {
slides.forEach((slide) => {
slide.classList.remove("active");
});
slideNumber++;
if (slideNumber > numberOfSlides - 1) {
slideNumber = 0;
}
slides[slideNumber].classList.add("active");
}, 5000);
};
repeater();
//Get the button:
mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {
scrollFunction();
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
If you want the script run after the page is loaded you can add defer parameter
<script defer src="script/js.js"></script>
You're issue is you do not have topFunction defined in Global scope. To allow your HTML to have access to invoke topFunction, you can move it outside of the loadScript definition.
function loadScript {
// ...
}
function topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
However, you should be using the built-in defer attribute of the HTML <script> element to execute JavaScript after your HTML has finished loading.
<script defer src="script/js.js"></script>
This way, you can remove the need for load event listeners and whole-script function wrappers:
const slider = document.querySelector(".slider");
const nextBtn = document.querySelector(".next-btn");
const prevBtn = document.querySelector(".prev-btn");
const slides = document.querySelectorAll(".slide");
const numberOfSlides = slides.length;
var slideNumber = 0;
//image slider next button
nextBtn.addEventListener("click", () => {
slides.forEach((slide) => {
slide.classList.remove("active");
});
slideNumber++;
if (slideNumber > numberOfSlides - 1) {
slideNumber = 0;
}
slides[slideNumber].classList.add("active");
});
//image slider previous button
prevBtn.addEventListener("click", () => {
slides.forEach((slide) => {
slide.classList.remove("active");
});
slideNumber--;
if (slideNumber < 0) {
slideNumber = numberOfSlides - 1;
}
slides[slideNumber].classList.add("active");
});
//image slider autoplay
var playSlider;
var repeater = () => {
playSlider = setInterval(function() {
slides.forEach((slide) => {
slide.classList.remove("active");
});
slideNumber++;
if (slideNumber > numberOfSlides - 1) {
slideNumber = 0;
}
slides[slideNumber].classList.add("active");
}, 5000);
};
repeater();
//Get the button:
mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {
scrollFunction();
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
console.log('running')
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
Hope this helps.
I have a div with a 2 logos in it and on scroll the first logo hides and the second appears using classes. On reverse scroll the second logo should hide and the first reappear. The first is reappearing but the second is hiding then reappearing when I reach the top of the page.
I've been going around in circles and I can't understand why on reverse scroll the 'show-logo' class is reappearing. Can anyone explain why?
JS:
if ($(window).width() > 640){
var scrollTop = $(window).scrollTop();
var header = $(".site-header");
if (scrollTop > 50) {
header.addClass("scrolling");
setTimeout(function() {
header.addClass("show-logo");
}, 500);
}
else {
header.removeClass("show-logo scrolling");
};
} else {
header.removeClass("show-logo scrolling");
}
Thanks in advance.
The setTimeout has no clue that it should not run so it runs. So if you do not want it to execute it, you need to cancel it. Two different ways depending on what you want to happen.
var myTimer = null;
var header = $(".site-header");
var win = $(window);
win.on("scroll", function() {
if (myTimer) {
window.clearTimeout(myTimer)
}
if ($(win.width() > 640) {
var scrollTop = win.scrollTop();
if (scrollTop > 50) {
header.addClass("scrolling");
myTimer = setTimeout(function() {
header.addClass("show-logo");
}, 500);
} else {
header.removeClass("show-logo scrolling");
}
} else {
header.removeClass("show-logo scrolling");
}
});
or
var myTimer = null;
var header = $(".site-header");
var win = $(window);
win.on("scroll", function() {
if ($(win.width() > 640) {
var scrollTop = win.scrollTop();
if (scrollTop > 50) {
header.addClass("scrolling");
if (!myTimer) {
myTimer = setTimeout(function() {
header.addClass("show-logo");
}, 500);
}
} else {
header.removeClass("show-logo scrolling");
if (myTimer) {
window.clearTimeout(myTimer)
myTimer = null
}
}
} else {
header.removeClass("show-logo scrolling");
}
});
I am not a javascript expert. I have these two codes that don't work simultaneously. I don't know why and i ask you where could be the issue?
// This is the first part
//Get the button
var mybutton = document.getElementById("scrollToTop");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function toTopFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
// When the user scrolls the page, execute myFunction
window.onscroll = function() {
myFunction()
};
// This is the second part
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
Thanks to anyone
Every time you assign to window.onscroll it replaces the previous assignment.
If you want multiple event listeners, use addEventListener().
window.addEventListener("scroll", scrollFunction);
window.addEventListener("scroll", myFunction);
or call both functions in a single handler:
window.onscroll = function() {
scrollFunction();
myFunction();
};
// When the user scrolls down 20px from the top of the document,
// show the button.
window.onscroll = function () {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("Button").style.textAlign = "center".display =
"block";
} else {
document.getElementById("Button").style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
I have a nicely working 'scrolltop' script that works fine throughout my site.
However, it is a 'button' function script.
In some cases, I need to execute this script from being a button function to an 'onload' function.
I'm not verse enough to be able to convert the script. If anyone can advise me on how to do that, it would be greatly appreciated.
Here is the script (button function):
<button onclick="topFunction()" id="myBtn"><span class="BtnText">Page Top<span></button>
<script>
window.onscroll = function() {scrollFunction()}; function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {document.getElementById("myBtn").style.display = "block";}
else {document.getElementById("myBtn").style.display = "none";}}
function topFunction() {document.body.scrollTop = 0; document.documentElement.scrollTop = 0;}
</script>
I'm not entirely sure if you meant to execute the function topFunction() when the page loads.
But, if that's the case:
<script>
window.onload = function() {
topFunction();
}
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
}
else {
document.getElementById("myBtn").style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>