js精準定位導航菜單，比瞄點定位牛逼多了

作為前端工作人員，都知道錨點是網頁制作中超級鏈接的一種，又叫命名錨記。命名錨記像一個迅速定位器一樣是一種頁面內的超級鏈接，運用相當普遍。但是點擊瞄點超鏈接后，發現定位不準確，不能隨心所欲，這下很苦逼，，，下面的這個js定位導航菜單定位很精準，比瞄點定位好用多了，，精準度都可以自由調整。

<!Doctype html>
<html>
<head>
<meta charset="gb2312">
<title>js定位導航菜單</title>
<style type="text/css">
*{margin:0;padding:0;} .w{width:1200px;margin:0 auto;}
.nav{height:56px;margin-top:500px;margin-bottom:200px;}
.box{border:1px solid red;height:800px;margin-bottom:200px;}
.nav,#scroll_nav{width:100%;background:#7a3e47;color:#fff;position:relative;}
#scroll_nav .pubW_c{height:56px;}
#scroll_nav ul {margin-left:32px;}
#scroll_nav ul li{font-size:20px;float:left;display:inline;
width:152px;text-align:center;line-height:56px;color:#fff;}
#scroll_nav ul li a{color:#fff; width:152px;height:56px;margin:0 auto;display:block;}
#scroll_nav ul li a:hover,#scroll_nav ul li a.active{color:#7a3e47;
background:#fff;text-decoration:none;}
</style>
</head>
<body>
<div class="nav oh">
<div id="scroll_nav">
<div class="pubW_c w">
<ul class="fl">
<li><a href="javascript：void(0);">box01</a></li>
<li><a href="javascript：void(0);">box02</a></li>
<li><a href="javascript：void(0);">box03</a></li>
<li><a href="javascript：void(0);">box04</a></li>
</ul>
</div>
</div>
</div>
<div class="box w scroll_top">我是box01</div>
<div class="box w scroll_top">我是box02</div>
<div class="box w scroll_top">我是box03</div>
<div class="box w scroll_top">我是box04</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
(function($) {
$.fn.navScroll = function(o) {
o = $.extend({
navAddClass: 'cur',
conAddClass: 'posi',
navH: 60,
speedArg: 7
}, o || {});
var navAdd = o.navAddClass,conAdd = o.conAddClass,navH = o.navH,speedArg = o.speedArg;
var _el = $(this),arrPos = [],timer = null;
$('.' + conAdd + '').each(function() {
arrPos.push($(this).offset().top);
});
_el.each(function(index) {
$(this).attr('index', index);
$(this).bind('click',
function() {
$(window).unbind('scroll', WinScroll);
_el.each(function() {
$(this).removeClass(navAdd);
});
$(this).addClass(navAdd);
fnScroll($(this));
});
});
function fnScroll(obj) {
var iSpeed = 0;
var iTarget = arrPos[obj.attr('index')]-navH;
//alert(iTarget);
clearInterval(timer);
timer = setInterval(function() {
var oLength=$("#scroll_nav a").length;
var cur = $(document).scrollTop(),clientH = $(window).height(),docH = $(document).height();
//alert(cur+" "+clientH+" " +docH+" "+iTarget);
if(obj.attr('index')==oLength-1){
if((cur+clientH)>=docH){
iTarget=docH-clientH;
//alert(iTarget);
}
}
iSpeed = (iTarget - cur) / speedArg;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed)
if (Math.abs(iTarget - cur) < 1) {
clearInterval(timer);
window.scrollTo(0, iTarget);
$(window).bind('scroll', WinScroll);
} else {
window.scrollTo(0, cur + iSpeed);
}
},
30);
}
function WinScroll() {
var cur = $(document).scrollTop()+navH;
$.each(arrPos,
function(i) {
if (cur >= arrPos[i]) {
if (cur < arrPos[i + 1]) {
_el.each(function() {
if ($(this).attr('index') == i) {
$(this).addClass(navAdd);
} else {
$(this).removeClass(navAdd);
}
});
} else {
_el.each(function() {
if ($(this).attr('index') == arrPos.length - 1) {
$(this).addClass(navAdd);
} else {
$(this).removeClass(navAdd);
}
});
}
}
});
};
$(window).on('scroll', WinScroll);
};
})(jQuery);
$('#scroll_nav ul li a').navScroll({
navAddClass: 'active',
conAddClass: 'scroll_top',
navH: 70,
speedArg: 7
});
window.onload = window.onscroll = function() {
var oNav=document.getElementById('scroll_nav');
var oTop = document.documentElement.scrollTop || document.body.scrollTop;
//alert(oTop);
if (oTop >= 600) {
if (typeof document.body.style.maxHeight === "undefined") {
oNav.style.top = oTop + 'px';
} else {
oNav.style.position = 'fixed';
oNav.style.top = 0;
oNav.style.zIndex=999999;
}
} else {
oNav.style.position = 'absolute';
oNav.style.top = 0+"px";
}
};
</script>
</body>
</html>

效果演示地址：http://tangjiusheng.com/jstx/131.html

HTML 中，ARIA 角色（Accessible Rich Internet Applications）是一種用于提高可訪問性的技術。ARIA 角色可以幫助屏幕閱讀器、鍵盤用戶和其他輔助技術正確地理解和導航網頁中的結構和交互元素。

ARIA 角色是一種用于描述網頁元素的方式，它可以讓輔助技術更好地理解元素的功能和行為。例如，使用 aria-label 屬性可以為無視力用戶提供元素的描述，使用 aria-labelledby 屬性可以將元素與其標簽相關聯，使用 aria-describedby 屬性可以為元素提供描述信息等。

ARIA 角色還可以幫助鍵盤用戶更方便地導航網頁，例如，使用 aria-expanded 屬性可以控制可折疊的菜單，使用 aria-haspopup 屬性可以指示元素包含彈出菜單等。

使用 ARIA 角色不僅可以提高網頁的可訪問性，還可以讓用戶體驗更好，因為它可以讓用戶更容易地理解和操作網頁中的各種元素。

標題: 實現 HTML 中的 ARIA Roles: 一個簡單示例

下面是一個使用 ARIA 角色的簡單示例：

<!DOCTYPE html>

<head>

<title>Example Page</title>

</head>

<body>

<h1>Example Page</h1>

<p>This is an example page with ARIA roles.</p>

</ul>

<p>This is some text that describes the menu.</p>

<button aria-expanded="true">Expand</button>

<li role="menuitem">Subitem 1</li>

<li role="menuitem">Subitem 2</li>

<li role="menuitem">Subitem 3</li>

</ul>

<p>This is some text that describes the submenu.</p>

</body>

</html>

在上述示例中，我們使用了 aria-label 屬性來為按鈕提供描述，使用 role="menu" 來定義菜單，使用 aria-expanded 屬性來控制菜單的展開狀態，同時還使用了 role="menuitem" 來定義菜單項。通過這樣的方式，我們可以讓屏幕閱讀器和鍵盤用戶更好地了解和操作網頁中的元素。

標題: 實踐中的 ARIA Roles: 提高可訪問性的關鍵技巧

實現 HTML 中的 ARIA 角色的關鍵技巧包括：

1. 正確地使用 ARIA 角色：確保每個元素都有正確的 ARIA 角色，以便輔助技術可以正確地理解元素的功能和行為。

2. 使用描述性 ARIA 屬性：使用 aria-label、aria-labelledby 和 aria-describedby 等屬性來提供元素的描述，以便于無視力用戶。

3. 控制可折疊的元素：使用 aria-expanded 屬性來控制可折疊的元素，例如菜單。

4. 指定彈出菜單：使用 aria-haspopup 屬性來指定元素包含彈出菜單。

5. 提高鍵盤導航：使用 ARIA 屬性來提高鍵盤用戶的導航體驗，例如使用 tabindex 屬性來定義元素的焦點順序。

通過正確地使用 ARIA 角色和屬性，我們可以讓網頁更具可訪問性，同時也讓用戶體驗更好。

頁布局基礎教程

網頁的布局有很多種方式，一般分為以下幾個部分：

頭部區域部分
菜單導航區域部分
內容區域部分
底部區域部分

一般網頁的布局

網頁頭部區域部分

頭部區域部分位于整個網頁的頂部，一般用于設置網頁的標題或者網頁的圖標：

實例如下：

代碼1

效果1

代碼2

效果2

部分代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS網頁布局教程</title>
    <style>
        body {
            margin: 0;
        }

        /* 頭部樣式 */
        .header {
            background-color:darkslategrey;
            padding: 25px;
            text-align: center;
        }
        h1
        {
            color: aliceblue;
        }
    </style>
</head>
<body>
<div class="header">
    <h1>頭部區域部分</h1>
</div>

</body>
</html>

菜單導航區域

菜單導航條包含了一些鏈接，可以引導用戶瀏覽其他頁面：

代碼1

效果

實現代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS 網頁布局 </title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
        }

        /* 頭部樣式 */
        .header {
            background-color: #f1f1f1;
            padding: 20px;
            text-align: center;
        }

        /* 導航條 */
        .topnav {
            overflow: hidden;
            background-color:midnightblue;
        }

        /* 導航鏈接 */
        .topnav a {
            float: left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        /* 鏈接 - 修改顏色 */
        .topnav a:hover {
            background-color: #ddd;
            color: black;
        }
    </style>
</head>
<body>

<div class="header">
    <h1>頭部區域</h1>
</div>

<div class="topnav">
    <a href="#">導航鏈接</a>
    <a href="#">導航鏈接</a>
    <a href="#">導航鏈接</a>
</div>

</body>
</html>

內容區域

內容區域一般形式（根據屏幕分辨率和舒適的視覺體驗）:

1 例：用于移動端
2 例：用于平板設備
3 例：用于 PC 桌面設備

內容區域一般形式

創建一個響應式布局PC和以設備有不一樣的布局，如下：

部分代碼

PC 換顯示

移送設備顯示

IPad顯示

實現代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS 網頁布局(runoob.com)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
        }

        /* 頭部樣式 */
        .header {
            background-color: #f1f1f1;
            padding: 20px;
            text-align: center;
        }

        /* 導航條 */
        .topnav {
            overflow: hidden;
            background-color: #333;
        }

        /* 導航鏈接 */
        .topnav a {
            float: left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        /* 鏈接 - 修改顏色 */
        .topnav a:hover {
            background-color: #ddd;
            color: black;
        }

        /* 創建三個不相等的列 */
        .column {
            float: left;
            padding: 10px;
        }

        /* 左右兩側寬度 */
        .column.side {
            width: 25%;
        }

        /* 中間區域寬度 */
        .column.middle {
            width: 50%;
        }

        /* 列后面清除浮動 */
        .row:after {
            content: "";
            display: table;
            clear: both;
        }

        /* 響應式布局 - 寬度小于600px時設置上下布局 */
        @media screen and (max-width: 600px) {
            .column.side, .column.middle {
                width: 100%;
            }
        }
    </style>
</head>
<body>

<div class="header">
    <h1>頭部區域</h1>
    <p>重置瀏覽器大小查看效果。</p>
</div>

<div class="topnav">
    <a href="#">鏈接</a>
    <a href="#">鏈接</a>
    <a href="#">鏈接</a>
</div>

<div class="row">
    <div class="column side">
        <h2>左側欄</h2>
        <p>網頁布局教程 - 網頁布局教程</p>
    </div>

    <div class="column middle">
        <h2>主區域內容</h2>
        <p>網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程</p>
        <p>網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程</p>
    </div>

    <div class="column side">
        <h2>右側欄</h2>
        <p>網頁布局教程 - 網頁布局教程</p>
    </div>
</div>

</body>
</html>

底部區域部門

底部區域部分在網頁的最下方，一般包含版權信息，爬蟲信息和聯系方式等。

HTML代碼

CSS代碼

效果

實例代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS 網頁布局 </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
        }

        /* 頭部樣式 */
        .header {
            background-color: #f1f1f1;
            padding: 20px;
            text-align: center;
        }

        /* 導航條 */
        .topnav {
            overflow: hidden;
            background-color: #333;
        }

        /* 導航鏈接 */
        .topnav a {
            float: left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        /* 鏈接 - 修改顏色 */
        .topnav a:hover {
            background-color: #ddd;
            color: black;
        }

        /* 創建三個相等的列 */
        .column {
            float: left;
            padding: 10px;
        }

        /* 左右兩側寬度 */
        .column.side {
            width: 25%;
        }

        /* 中間區域寬度 */
        .column.middle {
            width: 50%;
        }

        /* 列后面清除浮動 */
        .row:after {
            content: "";
            display: table;
            clear: both;
        }

        /* 響應式布局 - 寬度小于600px時設置上下布局 */
        @media screen and (max-width: 600px) {
            .column.side, .column.middle {
                width: 100%;
            }
        }

        /* 底部樣式 */
        .footer {
            background-color:black;
            padding: 10px;
            text-align: center;
        }
        p
        {
        color:white;
        }
    </style>
</head>
<body>

<div class="header">
    <h1>頭部區域</h1>
    <p>重置瀏覽器大小查看效果。</p>
</div>

<div class="topnav">
    <a href="#">鏈接</a>
    <a href="#">鏈接</a>
    <a href="#">鏈接</a>
</div>

<div class="row">
    <div class="column side">
        <h2>左側欄</h2>
        <p>菜鳥教程 - 學的不僅是技術，更是夢想！</p>
    </div>

    <div class="column middle">
        <h2>主區域內容</h2>
        <p>菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！</p>
        <p>菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！</p>
    </div>

    <div class="column side">
        <h2>右側欄</h2>
        <p>菜鳥教程 - 學的不僅是技術，更是夢想！</p>
    </div>
</div>

<div class="footer">
    <p>底部區域</p>
</div>

</body>
</html>

下次詳細講解另一種響應式網頁的實現，感謝點贊助力！

另一種響應式頁面

在線咨詢

上一篇：基于Thinkphp5 + BUI的進銷存系統
下一篇：Html、Css、JavaScript制作圓形進度條的代碼及基礎分析

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。