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>
  • 相关阅读:
    使用XMLReader读XML
    C#命名空间大全详细教程
    C# using 三种使用方式
    SVN服务器搭建
    简单的自定义Session
    python学习第十八天 --错误&异常处理
    锁的等级:方法锁、实例锁、类锁
    java线程池如何合理的设置大小
    挖掘两个Integer对象的swap的内幕
    实现线程同步的方式
  • 原文地址:https://www.cnblogs.com/fkcqwq/p/13627004.html
Copyright © 2011-2022 走看看