Switching text and hrefs depending on scroll location with JS

Question

I have a page with a lot of text that requires some amount of scrolling. I was able to get a button, when clicked, to shoot to the top of the page I am on. But when at the top of the page, I am wanting this button to switch to another link that goes to the homepage.

Bonus Points: How would I change the text to also switch from "top" to "home"? I have not tackled this hurdle because I figured my issue with switching the href would correlate to this obstacle.

JS:

window.onscroll = function() { scrollFunction() };

function scrollFunction() {
    document.getElementById("scroll-to-top-button").classList.toggle("show");
    window.onclick = function(event) {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            window.location = "#top";
        } else if(document.body.scrollTop = 0){
            window.location.href = "https://homepage.html";
        }
    }
}

html:

<a href="" class="scroll-to-top-button active" onclick="scrollFunction()" data-smooth-scroll=""><div class="fas fa-angle-up">top</div></a>

I have tried using window.scrollY instead of .scrollTop - but I have not touched scrolling elements prior to this. I am a little fuzzy with how to indicate if I have scrolled vs not scrolled. I do not know if my issue is because my if, else elements are not correct - or if it is something else?

You're adding tens of click listeners per second every time you scroll the page. You've to pull the window.onclick = ... out of the scroll listener. Or actually, you've to pull everything out of the scroll handler. — Teemu
– Teemu, Commented Jun 17, 2021 at 14:18
Great questions. For bonus points, let us know what you have tried so far and what didn't work. For further information, please refer to the help article regarding how to ask good questions and take the tour. — wazz
– wazz, Commented Jun 17, 2021 at 14:18
Is Your button/anchor element have a position of fixed? if not why don't you take two different button/anchor to toggle from top to bottom and bottom to top? — Uchiha Itachi
– Uchiha Itachi, Commented Jun 17, 2021 at 14:53

soraku02 · Accepted Answer · 2021-06-17 15:06:35Z

Here's a small code snippet example to answer your question,

const anchor = document.querySelector('a') 



window.addEventListener('scroll',() => {
  if(window.scrollY > 100){
    anchor.setAttribute('href', "#above")
    anchor.innerText = "go above"

  }else{
    anchor.setAttribute('href', "#below")
    anchor.innerText = "go below"

  }
})

html{
  scroll-behavior: smooth;
}
header{
  background: white;
  width: 100%
}
#above{
  height:100vh;
  width: 100%;
  background: blue;
}
#below{
  height: 100vh;
  width: 100%;
  background: green;
}

  <header style="position:fixed">    
  <a href="#below">go below</a>
  </header>
  
  <section id="above"></section>
  <section id="below"></section>

Here I am using setAttribute() to change the href attribute of anchor tag, and innerText to change that same anchor tag's text. I am using scrollY to check amount of window scrolled.

You could change the if(window.scrollY > 'change this value') according to your need

Collectives™ on Stack Overflow

Switching text and hrefs depending on scroll location with JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related