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>
  • 相关阅读:
    Java虚拟机(JVM)中的内存设置详解
    设置TOMCAT的JVM虚拟机内存大小
    什么是SQL注入式攻击
    常见的数据库基础面试题大全
    Struts1与Struts2的12点区别
    sql server导出insert语句
    jsp 将html字符串输出html标签
    GC 基础
    jstl fn标签
    Struts2 中result type属性说明
  • 原文地址:https://www.cnblogs.com/fkcqwq/p/13627004.html
Copyright © 2011-2022 走看看