var lastScroll = 0;
window.addEventListener('scroll', function() {
var stickyHeader = document.querySelector(".header");
var isScrolled = window.pageYOffset > 1;
var currentScroll = document.body.getBoundingClientRect().top;
var scrollDirection = currentScroll > lastScroll;
var shouldToggle = isScrolled && scrollDirection;
stickyHeader.classList.toggle("active", shouldToggle);
lastScroll = currentScroll;
// var idArrowScrollUp = document.querySelector("#arrowScrollUp");
// var arrowScrollUp = window.pageYOffset >= 5;
// idArrowScrollUp.classList.toggle("arrowScrollUp", arrowScrollUp);
});
In the above code, the uncommented part is handling header menu animation(not the subject of discussion now), and the commented part when was uncommented was supposed to address following function:
Insert a class when the scroll bar has qualified for a certain Y offset and its binary condition: true.
It was certainly inserting the class but was showing strange behavior.
Despite no click, the event was defined when the SVG where the class is inserted was clicked it scrolled the page to the top.
Secondly, when the scroll bar was at the bottom and the page was refreshed, it automatically scrolled the page to the top.
I attempted a fix:
I wrote this code, outside the scroll event:
var idArrowScrollUp = document.querySelector("#arrowScrollUp");
var arrowScrollUp = window.pageYOffset >= 5;
console.log(arrowScrollUp);
idArrowScrollUp.classList.toggle("arrowScrollUp", arrowScrollUp);
idArrowScrollUp.addEventListener('click', function() {
window.scrollTo(0, 0);
})
An issue with this → var arrowScrollUp = window.pageYOffset >= 5; This is no more `bonded dynamically to scroll event so condition is dynamically not true or false based on the scrolling position. so the class is not inserting/elimnating. How should I correct the gap?
When you click the scroll arrow you have an anchor with a ‘#’ as the href which will automatically send you to the top of the page without the need for JS just like any fragment identifier would.
As far as refreshing the page goes I see no scroll to top occurring in the page I mentioned above. I believe that if you wanted to store the current scroll position on refresh you’d need to do that manually with cookies/local storage or appending something to the address bar or something like this and then retrieving that information when the page loads and sending the page to that destination. However testing on the page mentioned it seems to maintain its scroll position even on refresh so I may be misunderstanding the problem
var idArrowScrollUp = document.querySelector("#arrowScrollUp");
var arrowScrollUp = window.pageYOffset >= 5;
console.log(arrowScrollUp);
idArrowScrollUp.classList.toggle("arrowScrollUp", arrowScrollUp);
idArrowScrollUp.addEventListener('click', function() {
window.scrollTo(0, 0);
})
The problem with the alternative JS version is that the scroll is not `attached/binded to an event scroll so this part of the code is not dynamically responding:
var arrowScrollUp = window.pageYOffset >= 5; based on the scroll position change, it is not updating its True or False status. so the class is not updating accordingly.
Update: (As you mentioned)
The problem with auto scroll is after first ckick on svg arrow to top # become part of the URL, so on next rerresh. it was auto scrolling.
scroll add even listener was also not needed twice as it was already used in header menu scroll so this is the final version of fully working JS code deployed online here:
var idArrowScrollUp = document.querySelector("#arrowScrollUp");
idArrowScrollUp.addEventListener('click', function() {
window.scrollTo(0, 0);
})
var lastScroll = 0;
window.addEventListener('scroll', function() {
var stickyHeader = document.querySelector(".header");
var isScrolled = window.pageYOffset > 1;
var currentScroll = document.body.getBoundingClientRect().top;
var scrollDirection = currentScroll > lastScroll;
var shouldToggle = isScrolled && scrollDirection;
stickyHeader.classList.toggle("active", shouldToggle);
lastScroll = currentScroll;
var arrowScrollUp = window.pageYOffset >= 5;
idArrowScrollUp.classList.toggle("arrowScrollUp", arrowScrollUp);
});
For now only one doubt pertains, a with # was causing issue and w/o it was refreshing page. was there any solution? Though I have changed that tag with button tag, which has eliminated a tag needs and thus issue associated with that.
That takes away from the inherent function of the anchor which is to go to a destination. Without JS your button would no longer work. You should first make sure the code works without JS and then use JS to enhance.
I would use an anchor which will work without js but then when you add your click handler you can prevent the default action of the link and scroll to the top with your js.
Also note that rather than using # in your empty hrefs you god instead use a non existent ID and the link won’t go anywhere. e.g. <a href="#nogo">Goes nowhere</a> (bear in mind that that ‘nogo’ will get appended to the address bar although it does nothing).
However semantically it would be better for the link to have a real address such as <a href="#top"> and then all is good and semantic. You then just prevent default in your JS when clicked to stop the link being followed and showing in the address bar.
Always try to use the elements that were designed to do the job semantically.
