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>
  • 相关阅读:
    JAVA面试常见问题之开源框架和容器篇
    JAVA面试常见问题之Redis篇
    JDK8日期时间操作小汇总
    JAVA面试常见问题之数据库篇
    JAVA面试常见问题之设计模式篇
    JAVA面试常见问题之锁机制篇
    JAVA面试常见问题之进程和线程篇
    JAVA面试常见问题之常见集合篇
    JAVA面试常见问题之基础篇
    洛谷P1315 观光公交
  • 原文地址:https://www.cnblogs.com/longly/p/9658221.html
Copyright © 2011-2022 走看看