How to make vue.js scroll up on button click?

Question

When the button is clicked, the page should go to the top.

But it's just a click, I can't get what I want.

I am using javascript and vue.

The code below is the main code.

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

I have inserted the following code into this code. This code is <main-logo></main-logo> in the code above.

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

I want to use window.scrollTo(0, 0) in this code.

But it doesn't work. Because overflow-y: auto; in the first code is the cause.

Without it, I can get the desired result.

But I also need overflow-y: auto;. Because that's the only way I can show you things you can't see.

Is there any way to solve the problem by using both?

Are you sure the button is not causing reloading of the page since you didn’t give it an explicit type? Do you actually see the message being logged in the bowser console? Can you create a minimal reproducible example in the question itself? — Terry
– Terry, Commented Oct 6, 2021 at 22:29
Yes. When I press the button, I see the text 'click'. Please wait for the minimal reproducible example. It will take some time to read and come. — dkskfktldi
– dkskfktldi, Commented Oct 6, 2021 at 22:41
You need to share some code because all the code you’ve tried assumes the document is the scrollable element. In your app it might not be the case, but we would never know since you have not provided any example. — Terry
– Terry, Commented Oct 6, 2021 at 23:07

Terry · Accepted Answer · 2021-10-07 12:14:13Z

My suspicions were correct after you updated your question with your code. The scrolling element is not the document, therefore all your attempts to scroll to top has failed. Instead, you should be targetting the overflowing element instead. In this case, that will be the one that matches the selector #mainboard.

There are two ways to do it. The quick and dirty way is to simply assume that #mainboard will always exist, and you simply perform the scrolling in the MainLogo component:

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

However, I strongly discourage this quick solution simply because MainLogo component needs to know that somewhere in the document, beyond its own control, that an element #mainboard exists (there is no separation of concerns here). A cleaner method, albeit more verbose, will be fore the MainLogo component to emit some kind of event, which is then listened to by the parent component who has knowledge of the element it needs to scroll. For example:

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

Then, in the parent component that consumes the MainLogo component, it simply has to listen to the event and act on it accordingly. In the template, you can use the v-on binding:

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

And since your parent component already has a reference to the #mainboard element, you can just reference it using this.$refs.mainboard:

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

Thanks for the kind explanation. The first method didn't work, but the second method helped me. Thanks to you, I got the desired result. And I know how to post. Thank you so much!

Collectives™ on Stack Overflow

How to make vue.js scroll up on button click?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related