The click button is implemented in the VUE to scroll to the page to the corresponding location (implementation using the C3 smoothing property)

vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现) In the VUE project, you need to implement click the corresponding button, scroll to the corresponding page position, share a simple and practical method

Original address http://www.sharedblog .cn /? post = 205

button 1
  button 2  
Button three
button five
Export default {data () {return {}}, methods: {submit (key) {debugger // Get Click on the button corresponding to the page ID VAR pageID = Document.QuerySelector ('# page' + key) // Print the corresponding page and the window of the window console.log (pageid.offSettop) // use smoothing properties, slide to the distance // below, I only set below. Top, of course, you can also add Left to let him slide // widow, scroll according to the browser, if you want to slide in a box, remember to modify Window.Scrollto ({'TOP': pageid.offSettop, 'Behavior': 'Smooth'}}}}
.box {width: 100%;}. Page {Width: 100%}. PAGE DIV {Width: 100%; Height: 1000px;}
Summary
is small Implementing the click button in the Vue introduced to you to scroll to the page right position, I hope everyone can help, if you have any questions, please leave a message, the small package will reply to everyone. Thank you very much for your support of Tumi Cloud Website!
If you think this article helps you, welcome to reprint, please indicate the source, thank you!
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment