使用scrollIntoView方法解决抛锚定位时网页往上跳的问题 2016.10.17

最新推荐文章于 2024-10-22 11:36:36 发布

转载最新推荐文章于 2024-10-22 11:36:36 发布 · 507 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/relstart/p/5971205.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用HTML、CSS和JavaScript实现的固定导航栏案例，该导航栏在页面滚动时保持位置不变，并提供了点击导航链接直接跳转到对应页面元素的功能。通过设置导航项的hover样式和页面元素的滚动定位，提升了用户体验。

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
  <head>
    <title>nav测试</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
      *{margin:0; padding:0}
      body{width:960px; height:2000px; margin:0 auto; border: 1px dotted #432432;}
      ul,li{list-style-type: none;}
      a{text-decoration: none;}
      .nav{border:1px solid #000; 
         height:30px; 
         z-index:9999; 
        position:fixed ; 
        top:0px;
        _position:absolute;
        _top:expression(documentElement.scrollTop + "px");
      }
      .nav ul li{
        float:left;
        font-size: 16px;
        line-height: 30px;
        padding:0px 63px;
      }
      .nav ul li:hover{
        background: #23ded3;
      }
      #main{
        height:1000px; 
        border:1px solid #f00;
        margin-top:30px;
      }
      #div1{
        height:400px;
        border: 1px solid #ccc;
      }
       #div2{
        height:400px;
        border: 1px solid #ccc;
      }
       #div3{
        height:400px;
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <div id="headr">
      <div class="nav">
        <ul>
          <li><a>首页</a></li>
          <li><a onclick="onc()">你好</a></li>
          <li><a>很好</a></li>
          <li><a>他好</a></li>
          <li><a>真的</a></li>
          <li><a>哦哦</a></li>
        </ul>
      </div>
    </div>
    <div id ="main" style="width:960px; height: auto;">
      <div id="div1">
        <p>我是ｄｉｖ１的内容</p>
      </div>
      <div id="div2">
        <p>我是ｄｉｖ2的内容</p>
      </div>
      <div id="div3">
        <p>我是ｄｉｖ3的内容</p>
      </div>
    </div>
    <div id ="footr"></div>
  </body>
  <script type="text/javascript">
    var dHeight = document.documentElement.clientHeight;
    var div1 = document.getElementById("div1");
    var div2 = document.getElementById("div2");
    var div3 = document.getElementById("div3");
    div1.style.height = dHeight - 30 + "px";        //通过一个js动态的来确定每个div的高度,还可以通过循环来实现，这里就不加了，各位自己可尝试
    div2.style.height = dHeight -30 + "px";
    div3.style.height = dHeight -30 + "px";
      var li = document.getElementsByTagName("li");
      li[0].onclick = function(){
        div1.scrollIntoView(false);          //这里不能给true不然会将会与导航条重叠
      }
      li[1].onclick = function(){
        div2.scrollIntoView(false);
      }
      li[2].onclick = function(){
        div3.scrollIntoView(false);
      }
  </script>
</html>