當這個按鈕被點擊時，頁面應該會轉到頂部。

但只是點擊，我得不到我想要的。

我正在使用javascript和vue。

下面的代碼是主代碼。

<template>
  <div id="mainboard" ref="mainboard">
    <main-logo></main-logo>
    <b-container class="body">
      <grid-board v-if="viewMode === 'grid'" v-bind:postListProps="postList" v-bind:focusedPostID="focusedPost.id"></grid-board>
      <b-row v-if="viewMode === 'grid'">
        <b-col>
          <infinite-scroll v-bind:clientHeight="clientHeight"
                            v-bind:scrollHeight="scrollHeight"
                            v-bind:scrollTop="scrollTop"
                            v-bind:thresholdProp="threshold"
                            v-bind:messageProp.sync="scrollMsg"
                            @need-more="onScrollReachedBottom"></infinite-scroll>
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>

<script>
import Hashtag from './Hashtag.vue'
import Scrollbar from './Scrollbar.vue'
export default {
  components: { Scrollbar, Hashtag },
  name:
    'MainBoard',
  data () {
    return {
        msg: 'hello world',
        viewMode: 'grid',
        openSideList: false,
        focusedPost: {},
        inputText: '',
        clientHeight: 0,
        scrollHeight: 0,
        scrollTop: 0,
        threshold: 200,
        scrollMsg: '',
        isLoading: false,
        dummyCnt: 0,
        postList: [
                {
                    id: '993915c4-878b-4486-b9a8-052971a9620d',
                    title: 'aaaa',
                    descript: 'This is ...',
                    date: '2021/04/09',
                    profileImg: 'https://avatars.githubusercontent.com/u/16532326?v=4',
                    writer: 'stories2stories2stories2stories2stories2stories2stories2stories2stories2',
                    good: 1,
                    img: 'https://upload.wikimedia.org/wikipedia/commons/9/90/Seoul_City_Hall_20190608_001.jpg',
                    lat: 37.566543,
                    lot: 126.978421
                },
                {
                    id: '993915c4-878b-4486-b9a8-052971a9620d',
                    title: 'aaaa',
                    descript: 'This is ...',
                    date: '2021/04/09',
                    profileImg: 'https://avatars.githubusercontent.com/u/16532326?v=4',
                    writer: 'stories2stories2stories2stories2stories2stories2stories2stories2stories2',
                    good: 1,
                    img: 'https://upload.wikimedia.org/wikipedia/commons/9/90/Seoul_City_Hall_20190608_001.jpg',
                    lat: 37.566543,
                    lot: 126.978421
                },
                {
                    id: '993915c4-878b-4486-b9a8-052971a9620d',
                    title: 'aaaa',
                    descript: 'This is ...',
                    date: '2021/04/09',
                    profileImg: 'https://avatars.githubusercontent.com/u/16532326?v=4',
                    writer: 'stories2stories2stories2stories2stories2stories2stories2stories2stories2',
                    good: 1,
                    img: 'https://upload.wikimedia.org/wikipedia/commons/9/90/Seoul_City_Hall_20190608_001.jpg',
                    lat: 37.566543,
                    lot: 126.978421
                },
                {
                    id: '993915c4-878b-4486-b9a8-052971a9620d',
                    title: 'aaaa',
                    descript: 'This is ...',
                    date: '2021/04/09',
                    profileImg: 'https://avatars.githubusercontent.com/u/16532326?v=4',
                    writer: 'stories2stories2stories2stories2stories2stories2stories2stories2stories2',
                    good: 1,
                    img: 'https://upload.wikimedia.org/wikipedia/commons/9/90/Seoul_City_Hall_20190608_001.jpg',
                    lat: 37.566543,
                    lot: 126.978421
                },
                {
                    id: '993915c4-878b-4486-b9a8-052971a9620d',
                    title: 'aaaa',
                    descript: 'This is ...',
                    date: '2021/04/09',
                    profileImg: 'https://avatars.githubusercontent.com/u/16532326?v=4',
                    writer: 'stories2stories2stories2stories2stories2stories2stories2stories2stories2',
                    good: 1,
                    img: 'https://upload.wikimedia.org/wikipedia/commons/9/90/Seoul_City_Hall_20190608_001.jpg',
                    lat: 37.566543,
                    lot: 126.978421
                },
                {
                    id: '993915c4-878b-4486-b9a8-052971a9620d',
                    title: 'aaaa',
                    descript: 'This is ...',
                    date: '2021/04/09',
                    profileImg: 'https://avatars.githubusercontent.com/u/16532326?v=4',
                    writer: 'stories2stories2stories2stories2stories2stories2stories2stories2stories2',
                    good: 1,
                    img: 'https://upload.wikimedia.org/wikipedia/commons/9/90/Seoul_City_Hall_20190608_001.jpg',
                    lat: 37.566543,
                    lot: 126.978421
                },
                {
                    id: '993915c4-878b-4486-b9a8-052971a9620d',
                    title: 'aaaa',
                    descript: 'This is ...',
                    date: '2021/04/09',
                    profileImg: 'https://avatars.githubusercontent.com/u/16532326?v=4',
                    writer: 'stories2stories2stories2stories2stories2stories2stories2stories2stories2',
                    good: 1,
                    img: 'https://upload.wikimedia.org/wikipedia/commons/9/90/Seoul_City_Hall_20190608_001.jpg',
                    lat: 37.566543,
                    lot: 126.978421
                },
                {
                    id: '993915c4-878b-4486-b9a8-052971a9620d',
                    title: 'aaaa',
                    descript: 'This is ...',
                    date: '2021/04/09',
                    profileImg: 'https://avatars.githubusercontent.com/u/16532326?v=4',
                    writer: 'stories2stories2stories2stories2stories2stories2stories2stories2stories2',
                    good: 1,
                    img: 'https://upload.wikimedia.org/wikipedia/commons/9/90/Seoul_City_Hall_20190608_001.jpg',
                    lat: 37.566543,
                    lot: 126.978421
                },
                {
                    id: '993915c4-878b-4486-b9a8-052971a9620d',
                    title: 'aaaa',
                    descript: 'This is ...',
                    date: '2021/04/09',
                    profileImg: 'https://avatars.githubusercontent.com/u/16532326?v=4',
                    writer: 'stories2stories2stories2stories2stories2stories2stories2stories2stories2',
                    good: 1,
                    img: 'https://upload.wikimedia.org/wikipedia/commons/9/90/Seoul_City_Hall_20190608_001.jpg',
                    lat: 37.566543,
                    lot: 126.978421
                },
                {
                    id: '993915c4-878b-4486-b9a8-052971a9620d',
                    title: 'aaaa',
                    descript: 'This is ...',
                    date: '2021/04/09',
                    profileImg: 'https://avatars.githubusercontent.com/u/16532326?v=4',
                    writer: 'stories2stories2stories2stories2stories2stories2stories2stories2stories2',
                    good: 1,
                    img: 'https://upload.wikimedia.org/wikipedia/commons/9/90/Seoul_City_Hall_20190608_001.jpg',
                    lat: 37.566543,
                    lot: 126.978421
                },
                {
                    id: '993915c4-878b-4486-b9a8-052971a9620d',
                    title: 'aaaa',
                    descript: 'This is ...',
                    date: '2021/04/09',
                    profileImg: 'https://avatars.githubusercontent.com/u/16532326?v=4',
                    writer: 'stories2stories2stories2stories2stories2stories2stories2stories2stories2',
                    good: 1,
                    img: 'https://upload.wikimedia.org/wikipedia/commons/9/90/Seoul_City_Hall_20190608_001.jpg',
                    lat: 37.566543,
                    lot: 126.978421
                },
                {
                    id: '993915c4-878b-4486-b9a8-052971a9620d',
                    title: 'aaaa',
                    descript: 'This is ...',
                    date: '2021/04/09',
                    profileImg: 'https://avatars.githubusercontent.com/u/16532326?v=4',
                    writer: 'stories2stories2stories2stories2stories2stories2stories2stories2stories2',
                    good: 1,
                    img: 'https://upload.wikimedia.org/wikipedia/commons/9/90/Seoul_City_Hall_20190608_001.jpg',
                    lat: 37.566543,
                    lot: 126.978421
                },
                {
                    id: '993915c4-878b-4486-b9a8-052971a9620d',
                    title: 'aaaa',
                    descript: 'This is ...',
                    date: '2021/04/09',
                    profileImg: 'https://avatars.githubusercontent.com/u/16532326?v=4',
                    writer: 'stories2stories2stories2stories2stories2stories2stories2stories2stories2',
                    good: 1,
                    img: 'https://upload.wikimedia.org/wikipedia/commons/9/90/Seoul_City_Hall_20190608_001.jpg',
                    lat: 37.566543,
                    lot: 126.978421
                },
                {
                    id: '993915c4-878b-4486-b9a8-052971a9620d',
                    title: 'aaaa',
                    descript: 'This is ...',
                    date: '2021/04/09',
                    profileImg: 'https://avatars.githubusercontent.com/u/16532326?v=4',
                    writer: 'stories2stories2stories2stories2stories2stories2stories2stories2stories2',
                    good: 1,
                    img: 'https://upload.wikimedia.org/wikipedia/commons/9/90/Seoul_City_Hall_20190608_001.jpg',
                    lat: 37.566543,
                    lot: 126.978421
                },
                {
                    id: '993915c4-878b-4486-b9a8-052971a9620d',
                    title: 'aaaa',
                    descript: 'This is ...',
                    date: '2021/04/09',
                    profileImg: 'https://avatars.githubusercontent.com/u/16532326?v=4',
                    writer: 'stories2stories2stories2stories2stories2stories2stories2stories2stories2',
                    good: 1,
                    img: 'https://upload.wikimedia.org/wikipedia/commons/9/90/Seoul_City_Hall_20190608_001.jpg',
                    lat: 37.566543,
                    lot: 126.978421
                }
            ]
    }
  },
  watch: {
    viewMode: {
      immediate: true,
      handler (val) {
        this.$nextTick(() => {
          if (this.$refs.sidelist) {
            this.$refs.sidelist.addEventListener('scroll', this.scrollHandler)
          }
        })
      }
    }
  },
  mounted () {
    const dev = localStorage.getItem('dev') || false
    if (dev) {
      this.postList = JSON.parse(localStorage.getItem('postList')) || []
    }

    this.$refs.mainboard.addEventListener('scroll', this.scrollHandler)
    this.$refs.mainboard.addEventListener('resize', this.scrollHandler)
    this.scrollHandler()
  },
  methods: {
    onScrollReachedBottom () {
      console.log(`[MainBoard] [onScrollReachedBottom] let's get more data`)
      if (!this.isLoading) {
        this.scrollMsg = ''
        this.isLoading = true
        setTimeout(() => {
          this.isLoading = false
          if (this.dummyCnt < 1) {
            this.dummyCnt++
            const dummy = JSON.parse(JSON.stringify(this.postList))
            // this.postList = this.postList.concat(dummy)
            dummy.forEach(item => {
              this.postList.push(item)
            })
            console.log('concat', this.postList.length)
          } else {
            this.scrollMsg = '? ?? ??? ???'
          }
        }, 2000)
      }
    },
    scrollHandler () {
      switch (this.viewMode) {
        case 'grid':
          if (this.$refs.mainboard) {
            this.clientHeight = this.$refs.mainboard.clientHeight
            this.scrollHeight = this.$refs.mainboard.scrollHeight
            this.scrollTop = this.$refs.mainboard.scrollTop
          } else {
            console.warn(`[MainBoard] [scrollHandler] Undefined mainboard ref`)
          }
        break
        case 'map':
          if (this.$refs.sidelist) {
            this.clientHeight = this.$refs.sidelist.clientHeight
            this.scrollHeight = this.$refs.sidelist.scrollHeight
            this.scrollTop = this.$refs.sidelist.scrollTop
          } else {
            console.warn(`[MainBoard] [scrollHandler] Undefined sidelist ref`)
          }
        break
      }
      if (this.scrollMsg && this.clientHeight + this.scrollTop <= this.scrollHeight - this.threshold) {
        this.scrollMsg = ''
      }
    }
  }
}
</script>

<style scoped>
#mainboard {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
}
</style>

我在這段代碼中插入了下面的代碼。 這個代碼是& lt主標志& gt& lt/main-logo & gt；在上面的代碼中。

<template>
    <div class = "main-logo">
        <b-button class = "logo-img" pill variant="danger" v-on:click="greet()">???????</b-button>
    </div>
</template>

<script>
export default {
    name: 'main-logo',
    methods: {
        greet: function () {
            window.scrollTo(0, 0)

            console.log('click')
        }
    }
}
</script>

<style scoped>
.main-logo {
    position: fixed;
    width: 100vw;
    padding-top: 60px;
    padding-bottom: 60px;
    background: goldenrod;
    z-index: 1;
}
</style>

我想在這段代碼中使用window.scrollTo(0，0)。

但是不管用。因為overflow-y:auto；在第一個代碼中是原因。

沒有它，我也能得到想要的結果。

但我也需要overflow-y:auto；。因為這是我唯一能讓你看到你看不到的東西的方法。

有什么辦法可以兩者并用解決問題嗎？

在你用代碼更新了你的問題后，我的懷疑是正確的。滾動元素不是文檔，因此所有向上滾動的嘗試都失敗了。相反，您應該將溢出元素作為目標。在這種情況下，它將是與選擇器#主板匹配的那個。

有兩種方法可以做到?？焖俣a臟的方法是簡單地假設#mainboard將一直存在，您只需在MainLogo組件中執行滾動:

export default {
    name: 'main-logo',
    methods: {
        greet: function () {
            document.querySelector('#mainboard').scrollTo(0, 0);
        }
    }
}

然而，我強烈反對這種快速的解決方案，因為MainLogo組件需要知道在文檔的某個地方，在它自己的控制之外，存在一個element #mainboard(這里沒有關注點的分離)。在MainLogo組件發出某種事件之前，會有一個更干凈的方法，雖然更冗長，但它會被知道它需要滾動的元素的父組件監聽。例如:

export default {
    name: 'main-logo',
    methods: {
        greet: function () {
            this.$emit('scrollMainboard');
        }
    }
}

然后，在使用MainLogo組件的父組件中，它只需監聽事件并相應地對其進行操作。在模板中，您可以使用v-on綁定:

<main-logo v-on:scrollMainboard="scrollMainboard" />

因為你的父組件已經有一個對#mainboard元素的引用，你可以用這個來引用它。$refs.mainboard:

methods: {
    scrollMainboard: function() {
        this.$refs.mainboard.scrollTo(0,0);
    }
}