Check if user scrolled beyond certain amount

Question

I need show button backtotop only if user has scrolled beyond > 250. How I can do it?

My code:

<template>
    <div>
        <button v-if="checkScroll" class="goTop" @click="backToTop">
            <i class="fa fa-angle-up" aria-hidden="true"></i>
        </button>
    </div>
</template>

<script>
    export default {
        methods: {
            computed: {
                checkScroll() {
                   if ($(document).scrollTop() > 250) {
                       return true;
                   } else {
                       return false;
                   }
               }
           },
           backToTop() {
              this.$scrollTo('html');
           },
        }
    }
</script>

My code is not working. Errors I do not get. Button is hidden.

I remember seeing something on w3School's Javascript web tutorials about scroll position, but I don't know where that is. Hold on for a minute. — commandertuna, Feb 09 '19 at 14:53
In case you want to know when the user scrolled to the very bottom, see https://stackoverflow.com/questions/55419779 — trusktr, Feb 11 '22 at 20:13

Vucko · Accepted Answer · 2019-02-09T16:04:41.613

Also don't forget to destroy the event:

new Vue({
  el: "#app",
  data() {
    return {
      scroll: null
    }
  },
  methods: {
    handleScroll(e) {
      this.scroll = window.scrollY || window.scrollTop
    }
  },
  created() {
    window.addEventListener('scroll', this.handleScroll);
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll);
  }
})

html {
  height: 3000px; /* some random height for demonstration purpose */
}

button {
  position: fixed;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.2/dist/vue.js"></script>

<!-- scroll to see the button -->

<div id="app">
  <button v-show="scroll > 250">foobar</button>
</div>

commandertuna · Answer 2 · 2019-02-09T18:04:43.743

2

Use the onScroll event in Javascript to detect when the user scrolls down/up and use scrollTop() to automatically move to the top of the page when the button is clicked.

Make sure it is position:fixed;.

For more info, check out these: onScroll scrollTop()

To show/hide the button just change it's size using HTML DOM methods. For example:

document.getElementsByClassName("goTop")[0].width = 30;

edited Feb 09 '19 at 18:04

answered Feb 09 '19 at 14:56

commandertuna

104
1
13

1

A minor change, it's `getElementsByClassName` instead of `getElementByClassName`. This will return an array of buttons so you have to access it by it's index before changing the style, for example, `document.getElementsByClassName("goTop")[0].style.color = "red";` – Ana Liza Pandac Feb 09 '19 at 15:10

score 1 · Answer 3 · answered Feb 09 '19 at 14:59

codepen.io has great sketches for in demand features like this all for free. here is a scroll to top functionality page you can tweak to fit your needs hopefully https://codepen.io/rolandtoth/pen/eMamVK

.scrolltop-wrap {
$size: 3rem;
$offsetBottom: 2rem;
$offsetHorizontal: 2rem;
$scrollToRevealDistance: 12rem; // scroll offset to reveal scroll-to-top link

It's all scss instead of javascript. Here is a scss to css generator you can use, https://www.cssportal.com/scss-to-css/

Check if user scrolled beyond certain amount

3 Answers3

Linked