Implementing Scroll-Activated Class with Vanilla JavaScript

Question

Implementing Scroll-Activated Class with Vanilla JavaScript

I'm currently developing a Vue.js project and I want to implement a feature where a "back to top" button appears when the user scrolls beyond a certain point. However, I'm encountering an issue without using JQuery. Can you help me troubleshoot this problem?

Here is part of my template code:

<div class="scroll">
  <span class="scroll_button">Top</span>
</div>

And in the mounted() function:

const toTop = document.getElementsByClassName('scroll').addEventListener('scroll', function() {
  if (window.scrollY > 0) {
    this.classList.add('shown')
  }
});
toTop();

javascript vue.js

Answer 1

Answer №1

 data () {
    return {
        isScrolled: false
    };
},
methods: {
    handleScrollEvent () {
        this.isScrolled = window.scrollY > 0;
    }
},
created () {
    window.addEventListener('scroll', this.handleScrollEvent);
}

Answer 2

 data () {
    return {
        isScrolled: false
    };
},
methods: {
    handleScrollEvent () {
        this.isScrolled = window.scrollY > 0;
    }
},
created () {
    window.addEventListener('scroll', this.handleScrollEvent);
}

Implementing Scroll-Activated Class with Vanilla JavaScript

Answer №1

Similar questions

Use Javascript to toggle the display to none for a specific table row (tr)

Nested loop combining Callback and Promise with two API requests

Dealing with errors when Ajax response is not defined

Problems with ng-repeat in kenwheeler's AngularJS implementation

A function designed specifically for parsing and manipulating hyperlinks within dynamically added content using jQuery

When dynamically loaded HTML is involved, Javascript ajax calls often fail to execute properly

Transmit information between controllers during pageload in AngularJS without utilizing $rootscope

Tips for accessing form data that has been automatically uploaded in PHP

How can I prevent users from clicking the same link multiple times in HTML?

Creating a recursive function using NodeJS

Having difficulty creating a snapshot test for a component that utilizes a moment method during the rendering process

Is there a method to automatically create .stories.ts files in Angular Storybook?

Use JavaScript to create a new window and load the HTML content from an external URL

The Angular build is unsuccessful due to the presence of components from a separate Angular project

Creating a Vue.js directive that can access the context of a loop

Unable to render Javascript model in THREE JS

The issue with React Testing using Jest: The domain option is necessary

What is the method for adding line breaks to a JSON file?

Uploading photos to Postgres through express/multer

I am encountering errors when running NPM start