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>
  • 相关阅读:
    在中文SPS中去掉左上角的“帮助”
    如何将英文SPS站点迁移到中文SPS下?
    Pivot View问题???
    PostgreSQL
    一个简单的全选Jquery插件
    JavaScript 分页控件的实现
    EXTJS新的创建方式
    通用垂直居中方法兼容各浏览器改进
    对Excel中的工作表进行排序的VBA(备份一下)
    关于meta标签(力求“大全”)
  • 原文地址:https://www.cnblogs.com/fkcqwq/p/13627004.html
Copyright © 2011-2022 走看看