{"id":8183,"date":"2023-06-27T09:39:30","date_gmt":"2023-06-27T09:39:30","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=8183"},"modified":"2023-08-03T05:31:44","modified_gmt":"2023-08-03T05:31:44","slug":"scroll-visible-button-in-vuejs-using-css","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/vue\/scroll-visible-button-in-vuejs-using-css","title":{"rendered":"How to Make Vue.js Scroll Up on Button Click?"},"content":{"rendered":"
<template>\r\n  <div class = \"main-logo\">\r\n      <b-button class = \"logo-img\" pill variant=\"danger\"   v-on:click=\"greet()\">some text<\/b-button>\r\n  <\/div>\r\n<\/template><\/pre>\n
<script>\r\nexport default {\r\n  name: 'main-logo',\r\n  methods: {\r\n      greet: function () {\r\n        let elementToScroll = document.getElementById(\"mainboard\");\r\n        elementToScroll.scrollBy({\r\n            top: 0,\r\n            behavior: \"smooth\",\r\n         });\r\n      }\r\n  }\r\n}\r\n<\/script><\/pre>\n
<style scoped>\r\n.main-logo {\r\n  position: fixed;\r\n  width: 100vw;\r\n  padding-top: 60px;\r\n  padding-bottom: 60px;\r\n  background: goldenrod;\r\n  z-index: 1;\r\n}\r\n<\/style><\/pre>\n
Explanation<\/H3>
\nOn call of greet first it will find the element from the DOM on which you want to scroll up.
\nHere I have the user `mainboard` as an ID. if any changes are there you can update your ID over here.
\nNow with the help of scrollBy function call on element I am passing a few arguments with it.
\nFirst is the direction with the value. As we want to move up I have a user `top` with 0 value,
\nSecond, I have added `behavior` with a `smooth` value to make the scroll look animated while going up from bottom.<\/p>\n","protected":false},"excerpt":{"rendered":"
<template> <div class = “main-logo”> <b-button class = “logo-img” pill variant=”danger” v-on:click=”greet()”>some text<\/b-button> <\/div> <\/template> <script> export default { name: ‘main-logo’, methods: { greet: function () { let elementToScroll = document.getElementById(“mainboard”); elementToScroll.scrollBy({ top: 0, behavior: “smooth”, }); } } } <\/script> <style scoped> .main-logo { position: fixed; width: 100vw; padding-top: 60px; padding-bottom: 60px; background: goldenrod; […]<\/p>\n","protected":false},"author":1,"featured_media":8462,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[13],"tags":[],"class_list":["post-8183","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vue"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/8183"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=8183"}],"version-history":[{"count":1,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/8183\/revisions"}],"predecessor-version":[{"id":8184,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/8183\/revisions\/8184"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/8462"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=8183"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=8183"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=8183"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}