精华内容
下载资源
问答
  • 页面锚点定位

    2018-10-18 09:56:06
    做一个酒店的列表页面,遇到一个问题,点击下一页后页面定位在分页的地方,用了更好的用户体验,点击下一页后页面定位到顶部。   首先想到的是利用HTML锚点: ①:设置一个锚点链接<a href="#Page...

     做一个酒店的列表页面,遇到一个问题,点击下一页后页面定位在分页的地方,用了更好的用户体验,点击下一页后页面定位到顶部。

         

    首先想到的是利用HTML锚点:

    ①:设置一个锚点链接<a href="#PageTop" id="maoDian" >回到顶部</a>;(注意:href属性的属性值最前面要加#)

    ②:在页面中需要的位置设置锚点<a name="PageTop"></a>;(注意:a标签中要写一个name属性,属性值要与①中的href的属性值一样,不加#)标签中按需填写必要的文字,一般不写内容

     

    锚点设置好了以后又遇到一个新的问题,如何实现在点击下一页后自动定位到页面顶部,而非手动点击“回到顶部”,要实现页面自定定位,我想到利用jQuery的click()方法:

    $("#maoDian").click(); 

    本以为这样就OK啦,其实不然!!!

    直接通过.click()方法是不能触发<a >的跳转事件的,必须通过a的子元素,例如

       <a href="#PageTop" id="maoDian" >

    直接调用click()方法无效

    $("#maoDian").click();

    可以这样:

    $("#maoDian").append("<span></span>");

    $("#maoDian span").click();

    测试通过,万事大吉!!!

    展开全文
  • HTML刷新页面锚点定位问题 参考贴 https://developer.mozilla.org/zh-CN/docs/Web/API/Performance https://blog.csdn.net/zhouziyu2011/article/details/70673123 如果在a标签的href属性中配置了对应的锚点,那么在...

    HTML刷新页面锚点定位问题

    参考贴
    https://developer.mozilla.org/zh-CN/docs/Web/API/Performance
    https://blog.csdn.net/zhouziyu2011/article/details/70673123

    如果在a标签的href属性中配置了对应的锚点,那么在刷新当前页面的时候,页面会重新定位到锚点所在的位置

    如果要解决此问题,说白就是要,刷新的时候页面回到顶部,并且,清除地址栏的锚点定位

    需要用到,window.performance属性

    比如地址栏结尾

    index.html#product
    

    刷新页面,页面还是定位到product的位置,而且地址栏并没有还原成index.html的状态

    先说明

    performance.navigation.type

    返回一个整数值,表示网页的加载来源,可能有以下4种:

    ① 0:网页通过点击链接、地址栏输入、表单提交、脚本操作等方式加载,相当于常数performance.navigation.TYPE_NAVIGATENEXT。

    ② 1:网页通过重新加载按钮或location.reload()方法加载,相当于常数performance.navigation.TYPE_RELOAD。

    ③ 2:网页通过前进或后退按钮加载,相当于常数performance.navigation.TYPE_BACK_FORWARD。

    ④ 255:任何其他来源的加载,相当于常数performance.navigation.TYPE_UNDEFINED。

    就目前情况来判断,只考虑type值是否为1的情况,因为是当前页面的刷新情况

        if (window.performance.navigation.type == 1) {
            var thisURL = document.URL;
            if (thisURL.split('#')[1]) {
                var url = thisURL.split('#')[0]
                window.location.replace(url)
            }
        } else {
            // return
        }
    
    展开全文
  • <!... <... <head>...meta charset="UTF-8">...vue单页面锚点定位</title> <!-- cdn引入ElementUI样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/l...

    <!DOCTYPE html>
    <html lang="en">

        <head>
            <meta charset="UTF-8">
            <title>vue单页面锚点定位</title>
            <!-- cdn引入ElementUI样式 -->
            <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
            <style>
                [v-cloak] {
                    display: none;
                }
                
                * {
                    margin: 0;
                }
                
                .el-tabs--left .el-tabs__nav-wrap.is-left::after,
                .el-tabs--left .el-tabs__nav-wrap.is-right::after,
                .el-tabs--right .el-tabs__nav-wrap.is-left::after,
                .el-tabs--right .el-tabs__nav-wrap.is-right::after {
                    height: 100%;
                    width: 5px;
                    background: #333;
                    bottom: auto;
                    top: 0;
                    left: 0;
                }
                
                .el-tabs--left .el-tabs__active-bar.is-left,
                .el-tabs--left .el-tabs__nav-wrap.is-left::after {
                    left: 0!important;
                    width: 6px!important;
                }
                
                .menus_left_list {
                    position: fixed;
                    top: 300px;
                }
                
                .el-main {
                    padding: 0;
                }
                
                .el-container {
                    width: 64%;
                    margin: 0 auto;
                    background: #0e0e0e;
                }
                
                .el-menu--horizontal {
                    float: right;
                }
                
                .container {
                    width: 100%;
                    margin: auto;
                }
                
                .content_list {
                    display: flex;
                    flex-wrap: wrap;
                }
                
                .el-tabs__item {
                    color: #FFF;
                }
                
                .header {
                    width: 100%;
                    height: 107px;
                    background: #0e0e0e;
                    position: fixed;
                    top: 0;
                }
                
                .el-menu {
                    background: #0e0e0e;
                }
                
                .el-menu.el-menu--horizontal {
                    border: 0px;
                }
                
                .header_con_ {
                    width: 84%;
                    height: 67px;
                    margin: 19px auto;
                }
                
                .list_href {
                    width: 280px;
                    height: 130px;
                    background: #333333;
                }
                
                .img_div {
                    width: 40px;
                    height: 40px;
                    background: #FFF;
                    overflow: hidden;
                    border-radius: 50%;
                    margin-left: 27px;
                }
                
                .Images_ {
                    width: 40px;
                    height: 40px;
                }
                
                .list_href_con {
                    display: flex;
                    align-items: center;
                    margin-top: 16px;
                }
                
                .text_all_ {
                    width: 80%;
                    margin: 0 auto;
                    font-size: 13px;
                    color: #fff;
                    margin-top: 15px;
                }
                
                .list_href {
                    margin-right: 20px;
                    margin-bottom: 20px;
                }
                
                .h4_ {
                    color: #FFF;
                    width: 100%;
                }
                
                .span_Title {
                    width: 90px;
                    display: inline-block;
                    text-align: center;
                    border-left: 6px solid #169BD5;
                    margin-bottom: 30px;
                }
            </style>
        </head>

        <body style="background: #0e0e0e;">
            <div id="app" v-cloak>

                <div class="container">
                    <div class="header">
                        <div class="header_con_">
                            <img style="height: 60px;float:left" src="img/HBuilder.png" />
                            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" background-color="#0e0e0e" text-color="#fff" active-text-color="rgb(0, 127, 242)">

                                <el-menu-item index="1">处理中心</el-menu-item>
                                <el-submenu index="2">
                                    <template slot="title">我的工作台</template>
                                    <el-menu-item index="2-1">选项1</el-menu-item>
                                    <el-menu-item index="2-2">选项2</el-menu-item>
                                    <el-menu-item index="2-3">选项3</el-menu-item>
                                    <el-submenu index="2-4">
                                        <template slot="title">选项4</template>
                                        <el-menu-item index="2-4-1">选项1</el-menu-item>
                                        <el-menu-item index="2-4-2">选项2</el-menu-item>
                                        <el-menu-item index="2-4-3">选项3</el-menu-item>
                                    </el-submenu>
                                </el-submenu>
                                <el-menu-item index="3">消息中心</el-menu-item>
                                <el-menu-item index="4">
                                    <a href="###" target="_blank">订单管理</a>
                                </el-menu-item>
                                <el-menu-item index="5">消息中心</el-menu-item>
                                <el-menu-item index="6">消息中心</el-menu-item>
                                <el-menu-item index="7">消息中心</el-menu-item>
                                <el-menu-item index="8">消息中心</el-menu-item>
                                <el-menu-item index="9">消息中心</el-menu-item>

                            </el-menu>
                        </div>
                    </div>

                    <el-container style="padding-top: 120px;">
                        <el-main>

                            <div class="content_list" style="display: flex;">
                                <div class="h4_"><span class="span_Title">每日一览</span></div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                            </div>
                            <div class="content_list" style="display: flex;">
                                <div class="h4_"><span class="span_Title">学习提升</span></div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                            </div>
                            <div class="content_list" style="display: flex;">
                                <div class="h4_"><span class="span_Title">采集灵感</span></div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                            </div>
                            <div class="content_list" style="display: flex;">
                                <div class="h4_"><span class="span_Title">研究所得</span></div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                            </div>
                            <div class="content_list" style="display: flex;">
                                <div class="h4_"><span class="span_Title">交互设计</span></div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                            </div>
                            <div class="content_list" style="display: flex;">
                                <div class="h4_"><span class="span_Title">设计团队</span></div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                            </div>
                            <div class="content_list" style="display: flex;">
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                                <div class="list_href">
                                    <div class="list_href_con">
                                        <div class="img_div">
                                            <img src="img/HBuilder.png" alt="" class="Images_" />
                                        </div>
                                        <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                                    </div>

                                    <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                                </div>
                            </div>
                            <!--<div class="content_list" v-for="(item, index) in list" :key="index" >
                           <div style="width:100%;height:100%;font-size:30px;text-align:center;font-weight:bold;color:#fff;" :style="{'background':item.backgroundcolor}">{{item.name}}</div>
                      </div>-->
                        </el-main>
                    </el-container>

                </div>
                <el-tabs :tab-position="tabPosition" style="height: 480px;color: #FFF;" class="menus_left_list" v-model="editableTabsValue" @tab-click="handleClick">
                    <el-tab-pane v-for="(item, index) in editableTabs" :key="item.name" :label="item.title" :name="item.name">
                        {{item.content}}
                    </el-tab-pane>
                </el-tabs>
            </div>

            <!--cdn引入ElementUI组件必须先引入Vue-->
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
            <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
            <!-- cdn引入ElementUI组件库 -->
            <script src="https://unpkg.com/element-ui/lib/index.js"></script>
            <script src="http://mockjs.com/dist/mock.js"></script>
            <script type="text/javascript">
                const vm = new Vue({ // 配置对象 options
                    // 配置选项(option)
                    el: '#app', // element: 指定用vue来管理页面中的哪个标签区域
                    data: {
                        tabPosition: "left",
                        activeIndex: '1',
                        editableTabsValue: "0",
                        offset: [],
                        scroll: '',
                        editableTabs: [{
                                title: '每日一览',
                                name: '0',
                            },
                            {
                                title: '学习提升',
                                name: '1',
                            },
                            {
                                title: '采集灵感',
                                name: '2',
                            },
                            {
                                title: '研究所得',
                                name: '3',
                            },
                            {
                                title: '交互设计',
                                name: '4',
                            },
                            {
                                title: '设计团队',
                                name: '5',
                            },
                            {
                                title: '字体设计',
                                name: '6',
                            },
                            {
                                title: '教你配色',
                                name: '7',
                            },
                            {
                                title: '图标推荐',
                                name: '8',
                            },
                            {
                                title: '商业图库',
                                name: '9',
                            },
                            {
                                title: '素材资源',
                                name: '10',
                            },
                            {
                                title: '数据可视化',
                                name: '11',
                            }
                        ],
                        list: [{
                            name: "第一条",
                            backgroundcolor: "#90B2A3"
                        }, {
                            name: "第二条",
                            backgroundcolor: "#A593B2"
                        }, {
                            name: "第三条",
                            backgroundcolor: "#A7B293"
                        }, {
                            name: "第四条",
                            backgroundcolor: "#0F2798"
                        }, {
                            name: "第五条",
                            backgroundcolor: "#0A464D"
                        }],
                    },
                    methods: {
                        handleClick(tab, event) {
                            this.jump(tab.index)
                        },
                        jump(index) {
                            let jump = document.getElementsByClassName('content_list');
                            // 获取需要滚动的距离
                            let total = jump[index].offsetTop - 113;
                            // Chrome
                            document.body.scrollTop = total;
                            // Firefox
                            document.documentElement.scrollTop = total;
                            // Safari
                            window.pageYOffset = total;
                            // $('html, body').animate({
                            // 'scrollTop': total
                            // }, 400);
                        },
                        dataScroll: function() {
                            this.scroll = document.documentElement.scrollTop || document.body.scrollTop;

                        },
                        loadScroll: function() {
                            this.editableTabsValue = "0"
                            var self = this;
                            var sections = document.getElementsByClassName('content_list');
                            for(var i = sections.length - 1; i >= 0; i--) {
                                if(self.scroll >= sections[i].offsetTop - 183) {
                                    console.log(self.scroll)
                                    this.editableTabsValue = i.toString()
                                    break;
                                }
                            }
                        }

                    },
                    watch: {
                        //监听scroll变量,只要滚动条位置变化就会执行方法loadScroll
                        scroll: function() {
                            this.loadScroll()
                        }
                    },
                    mounted() {
                        // scroll代表滚动条距离页面顶部距离

                        //          list.forEach((itme)=>{
                        //              this.offset.push(itme.offset().top)
                        //          })
                        //          console.log(this.offset)
                        window.addEventListener('scroll', this.dataScroll);
                    }
                })
            </script>

        </body>

    </html>

    展开全文
  • 页面锚点定位方法

    2019-10-22 10:37:20
    实现:点击锚点跳转到相应DIV的问题 方法一: 实现方式:用标签,在href属性中写入DIV的id 缺点:点击锚点之后,浏览器的URL会发生变化,如果刷新可能会...实现方式:用animate属性,当点击锚点后,页面滚动到相应的...

    实现:点击锚点跳转到相应DIV的问题

    方法一:

    实现方式:用a标签,在href属性中写入DIV的id
    缺点:点击锚点之后,浏览器的URL会发生变化,如果刷新可能会出现问题。

    方法二:

    实现方式:在js事件中通过window.location.hash="divId"跳转,但地址也会发生变化,跟第一种方法没多大区别,甚至更麻烦。

    方法三:

    实现方式:用animate属性,当点击锚点后,页面滚动到相应的DIV
    优势:URL地址不会变,同时点击锚点时会自动响应scroll事件,不需要重新绑定。
    缺点:如果页面复杂的话,偏移值可能会发生变化需要算法辅助。

    此方法示例:

    <!--以下这一段适用于方法一的锚点实现-->
    <!DOCTYPE  html>
    <html>
    <head>
        <style>
            div {
                height: 800px;
                width: 400px;
                border: 2px solid black;
            }
            h2 {
                position: fixed;
                margin:50px  500px;
            }
        </style>
    </head>
    <body>
        <h2>
            <a href="#div1">to div1</a>
            <a href="#div2">to div2</a>
            <a href="#div3">to div3</a>
        </h2>
        <div id="div1">div1</div>
        <div id="div2">div2</div>
        <div id="div3">div3</div>
    </body>
    </html>
    
    // An highlighted block
    $(document).ready(function() {
        $("#div1Link").click(function() {
            $("html, body").animate({
                scrollTop: $("#div1").offset().top }, {duration: 500,easing: "swing"});
            return false;
        });
        $("#div2Link").click(function() {
            $("html, body").animate({
                scrollTop: $("#div2").offset().top }, {duration: 500,easing: "swing"});
            return false;
        });
        $("#div3Link").click(function() {
            $("html, body").animate({
                scrollTop: $("#div3").offset().top }, {duration: 500,easing: "swing"});
            return false;
        });
    });
    

    方法四:(推荐推荐推荐!!!!!)

    实现方式:用js的srollIntoView方法,直接用:
    document.getElementById(“divId”).scrollIntoView();
    优势:URL不会变,同时能够响应相应的scroll事件,不需要算法

    此方法示例:云平台op,运营活动模块
    先看下实现效果
    在这里插入图片描述
    代码实现:(右边?菜单列表)
    在这里插入图片描述
    代码实现:(左边?各类型展示)
    在这里插入图片描述
    代码实现:(这是核心重点!)
    在这里插入图片描述

    展开全文
  • 锚点定位 使用 <a href="#id名">连接文本</a> id名对应 新窗口打开的方法 target="_blank"属性可以使链接在新页面打开 如 <a href="http://www.baidu,com" target="_blank">百度</a> 也可用...
  • vue跳转页面锚点定位

    千次阅读 2019-08-11 11:35:36
    当前页面 <router-link to="/Member#member" @click.native="selectnav('Member')">VIP会员</router-link> 在methods中添加selectnav selectnav(sel){ localStorage.setItem('id',sel); //lo...
  • vue 跨页面锚点定位

    2019-10-04 17:32:54
    //离开页面进行对localStorage id销毁,避免其他入口进来有锚点问题 destroyed(){ localStorage.setItem( " toId " , '' ) } 首页跳转子页,首页跳转锚点效果 --   没有做锚点前的效果   转载...
  • js实现页面锚点定位动画滚动

    千次阅读 2020-01-19 17:06:04
    页面当前滚动距离 */ 4 var distance = y - scrollTop; /* 结果大于0,说明目标在下方,小于0,说明目标在上方 */ 5 var scrollCount = duration / 10; /* 10毫秒滚动一次,计算滚动次数 */ 6 var ...
  • 页面1跳转到页面2,需要定位页面2的某个地方 页面1代码:<a href="yemian2.html#1"></a> 页面2要被定位显示的地方外套一个ID为1的div 页面2代码:<div id="1"> <a href="#1"></...
  • html页面锚点定位显示

    千次阅读 2017-04-12 23:38:27
    html页面锚点定位显示
  • 相信做前端的都做过页面锚点定位的功能,通过<a> 去设置页面内锚点定位跳转。 本篇文章就使用tablayout、scrollview来实现android锚点定位的功能。 效果图: 实现思路 1、监听scrollview滑动到的位置,tablayout...
  • Android 实现锚点定位

    2020-11-09 15:21:06
    相信做前端的都做过页面锚点定位的功能,通过<a href="#head"> 去设置页面内锚点定位跳转。 本篇文章就使用tablayout、scrollview来实现android锚点定位的功能。 效果图: 实现思路 1、监听scrollview滑动到...
  • 主要介绍了页面锚点定位及跳转方法总结,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • onclick锚点定位

    2015-04-07 17:09:43
    onclick 锚点定位,页面右侧浮动锚点功能
  • 页面锚点定位及跳转方法总结  接着上一篇,其实是一个功能,本来感觉挺简单的一个问题,没想到遇到两个坎儿,无语。。。  上一篇是关于scroll事件绑定的问题,这一篇的问题是:点击锚点跳转到相应DIV...
  • html 页面锚点定位
  • 锚点定位

    2020-09-13 18:45:05
    锚点定位 锚点的作用:快速找到页面中的指定位置.需要在找到的页面中定义一个id属性.属性值任意 <a id=" ">要找到的位置</a> (点) 然后在跳转的标签使用"#"跟id属性值来迅速找到指定位置 <a href=""&...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 790
精华内容 316
关键字:

页面锚点定位