zoukankan      html  css  js  c++  java
  • js超链接锚点定位

    <html>
    <head>
    <meta charset="UTF-8">
    </head>
    <body>
    <a onclick="cc()" style="">定位</a>
    <a href="#nizhaodao">定位2号</a>
    <div>
    我是2号页面
    </div>
    <div id="aa" class="aa" style="display:none">
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div id="nizhaodao" name="nizhaodao">找我拉</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    <div>定位我啊</div>
    </div>
     
    <script>
    // 获取URL指定参数
    function GetQueryString(name){
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);//search,查询?后面的参数,并匹配正则
    if(r!=null)return unescape(r[2]); return null;
    }
    var none=GetQueryString("a");
    console.log(none);
    if(none==0){
    var bb=document.getElementById("aa");
    bb.style.display="block";
    window.onload=function(){
    location.href ="#nizhaodao";
    var oBox = document.getElementById("nizhaodao"); //要闪烁的div id
    var timer = null; //定义时间器
    var i = 0;
    clearInterval(timer); //先清空时间器
    oBox.onmouseover = function(){ //当鼠标移入div时 清空时间器
    clearInterval(timer);
    };
    timer = setInterval(function () {
    oBox.style.background = i++ % 2 ? "blue" : "#fff"; // 有规律的控制div的展示与隐藏
    i > 4 && (clearInterval(timer)) //控制闪烁次数
    }, 400 );
    }
    }
    function cc(id){
    // window.location.hash = "#nizhaodao";
    location.href ='#'+id;
    console.log("这个方法进来了");
    }
    // console.log(a);
    function aa(){
    var stateObject = {};
    var title = "修改地址";
    var newUrl = 'file:///E:/temp/url2.html?a=1&b=1';
    //修改地址栏中的地址
    history.pushState(stateObject, title, newUrl);
    }
    aa();
    </script>
    </body>
    </html>
  • 相关阅读:
    [数据结构与算法 01] 什么是数据结构?什么是算法?联系是什么?常用的数据结构/算法有?
    程序员面试金典-面试题 16.05. 阶乘尾数
    程序员面试金典-面试题 16.04. 井字游戏
    程序员面试金典-面试题 16.02. 单词频率
    程序员面试金典-面试题 16.01. 交换数字
    程序员面试金典-面试题 10.11. 峰与谷
    程序员面试金典-面试题 10.10. 数字流的秩
    程序员面试金典-面试题 10.09. 排序矩阵查找
    程序员面试金典-面试题 10.05. 稀疏数组搜索
    程序员面试金典-面试题 10.03. 搜索旋转数组
  • 原文地址:https://www.cnblogs.com/longly/p/9658221.html
Copyright © 2011-2022 走看看