H5页面，进入页面某个元素固定滑动至指定位置 

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

 

posted @ 2020-09-07 15:07  夏小夏吖  阅读(2352)  评论(0)  编辑  收藏  举报