zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    基本数据类型的包装类(wrapper class)、自动的装箱和拆箱、时间处理相关类、Math类、File类、枚举类
    数组、String、Stringbuilder、StringBuffer
    Introduction into browser events
    Javascript join example by separator
    text-transform
    JQuery :Not() Selector Example
    jQuery html() example
    jQuery
    $("selector").slice(start, end)
    位置博弈
  • 原文地址:https://www.cnblogs.com/fkcqwq/p/13627004.html
Copyright © 2011-2022 走看看