Question

仅当用户滚动底部> 250时才需要显示按钮backtotop。我该怎么做？

我的代码：

<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>

我的代码不起作用。我没有得到的错误。按钮是隐藏的。

Answer 1

也不要忘记破坏事件：

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>

Answer 2

使用Javascript中的 onScroll 事件来检测用户何时向下/向上滚动，并在按下按钮时使用 scrollTop（）自动移至页面顶部。点击。

确保它是position:fixed;。

有关更多信息，请查看以下内容： onScroll scrollTop()

要显示/隐藏按钮，只需使用HTML DOM方法更改按钮的大小即可。例如：

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

Answer 3

codepen.io免费提供了按需使用的功能强大的草图。这是滚动至顶部功能页面的页面，您可以对其进行调整以满足希望https://codepen.io/rolandtoth/pen/eMamVK

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

全部都是scss而不是javascript。这是您可以使用的CSS到CSS生成器，https://www.cssportal.com/scss-to-css/

检查用户是否滚动到底部

3 个答案: