• 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>
  • 相关阅读:
    WebCollector2.7爬虫框架——在Eclipse项目中配置
    JavaScript 输出
    CSS3 页面中展示邮箱列表点击弹出发送邮件界面
    CSS3 Flex Box(弹性盒子)
    CSS 分页实例
    CSS 图片
    CSS3 用户界面
    CSS3 动画
    CSS3 过渡
    CSS3 3D转换
  • 原文地址:https://www.cnblogs.com/longly/p/9658221.html
Copyright © 2020-2023  润新知