在 Vue 中滚动 100px 后显示 div 标签

Question

I am working filename.vue file. I am trying to add a div to show up after scroll 100px. I am not able to get it. Please help me find out where I am going wrong.

<template>
 <div id="sectionTop"> 
  <div id="scrollButton"> 
   <a class="topButton" href="javascript:document.getElementById('sectionTop').scrollIntoView(true);"><img src="../../images/uparrow.svg"></a>
  </div>
 </div>
</template>

<script>
 $(document).scroll(function() {
    var y = $(this).scrollTop();
    if (y > 800) {
      $('.scrollButton').fadeIn();
    } else {
      $('.scrollButton').fadeOut();
    }
  });
</script>

Updated as per suggested

<template>
 <div id="sectionTop"> 
  <div id="scrollButton"> 
   <a class="topButton" href="javascript:document.getElementById('sectionTop').scrollIntoView(true);" v-if="scrollpx > 800"><img src="../../images/uparrow.svg"></a>
  </div>
 </div>
</template>

<script>
  export default {    
    data() {
      return {
        scrollpx: 0
      };
    },
    methods: {
      handleScroll() {
        this.scrollpx = window.scrollY;
      }
    },
    created() {
      window.addEventListener('scroll', this.handleScroll);
    },
    destroyed() {
      window.removeEventListener('scroll', this.handleScroll);
    }
  };
</script>

Answer 1

You don't need jquery to do this. You can register an event listener for scroll events in the created method of your vue component (don't forget to unregister it afterwards!). In you handleScroll method you can then update a variable holding the current scrollY-value. Now this value is available to vue and can be used "reactively". For example, you can show your button using v-if :

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="replace"></div> <script> new Vue({ el: '#replace', template: ` <div id="scroller"> <div id="sectionTop" style="height: 5000px"> Please Scroll down <div id="scrollButton"> <a class="topButton" style="position:fixed" v-if="scrollpx > 800">Scroll top</a> </div> </div> </div>`, data() { return { scrollpx: 0 }; }, methods: { handleScroll() { this.scrollpx = window.scrollY; } }, created() { window.addEventListener('scroll', this.handleScroll); }, destroyed() { window.removeEventListener('scroll', this.handleScroll); } }) </script>

Answer 2

This is how I solved this problem.

<a class="scrollTop" href="javascript:document.getElementById('sectionTop').scrollIntoView(true);" title='Click here to go to the top' v-if="scrollpx > 100"><img src="../../images/uparrow.svg"></a>

<script>
  export default {    
    data() {
      return {
        scrollpx: 0
      };
    },
    methods: {
      handleScroll() {
        this.scrollpx = document.body.scrollTop;
      }
    },
    mounted() {
      document.body.addEventListener('scroll', this.handleScroll);
    } 
  };

</script>