H5頁面,進入頁面某個元素固定滑動至指定位置
阿新 • • 發佈:2020-09-07
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>滑動到指定位置</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui"> <script src="http://www.itxst.com/package/vue/vue.min.js"></script> <script src="http://www.itxst.com/package/sortable/Sortable.min.js"></script> <script src="http://www.itxst.com/package/vuedraggable/vuedraggable.umd.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <style scoped> #divBox{ height: 200px; overflow-y: auto; overflow-x: hidden; } #divBox div { padding: 100px 0; } </style> </head> <body style="padding:10px;"> <div id="app"> <div id="divBox"> <div id="test1">test1</div> <div id="test2">test2</div> <div id="test3">test3</div> <div id="test4">test4</div> <div id="test5">test5</div> <div id="test6">test6</div> <div id="test7">test7</div> </div> </div> <script> // 全域性註冊元件 Vue.component('vuedraggable', window.vuedraggable) var app = new Vue({ el: '#app', data() { return { }; }, mounted() { this.myArray = JSON.parse(sessionStorage.getItem("myArray")) this.scrollBox() }, methods: { scrollBox() { $('#divBox').scrollTop($('#test3').offset().top); // $('#divBox').animate({ // scrollTop: $("#test4").offset().top // }, 500); }, } }); // console.log($(".box")) </script> </body> </html>