JavaScript hash

location.hash -- 返回URL#后面的內容，如果沒有#，返回空

• hash，中文"哈希"
• 引用網址：http://www.dreamdu.com/javascript/location.hash/
• 兼容IE6+瀏覽器

hash屬性語法

location.hash;

hash屬性圖示

hash屬性說明

域名中#號后面的部分通常是指定位置的鏈接的方式產生的，例如：ASCII編碼-控制字符

上面這個鏈接會直接定位到http://www.dreamdu.com/xhtml/ascii/文檔中id為control_characters的標簽處。

示例

document.writeln(location.hash);

JavaScript hash 屬性示例 -- 可以嘗試編輯

• JavaScript hash 屬性示例

實例：滾動錨點

<section class="container">

<h2>JQuery Interal Link Animation Scrolling</h2>

<p>Click on the links below to see the scroll to effect.</p>

<ul class="nav">
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#portfolio">Portfolio</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>

<div id="home">
    <h2>Home</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tortor purus, placerat ut dignissim a, luctus ut magna. Nam posuere, purus eget ornare pellentesque, enim dolor sagittis lectus, nec porttitor nulla libero id quam. Sed vitae est felis, vitae sodales libero. Sed consectetur adipiscing elementum. Suspendisse magna diam, mollis a malesuada ut, rutrum a libero. Donec eget libero elit. Sed non augue ac magna porttitor posuere. Integer malesuada lorem sed augue fermentum vitae dictum lorem semper. Aliquam aliquam, justo sed placerat fringilla, magna erat placerat orci, a tristique risus ante at urna. Proin aliquet enim eget purus auctor eu interdum augue sagittis. Curabitur at dictum diam. Mauris risus est, tristique nec lobortis ut, ullamcorper quis nulla.</p>
</div>

<div id="about">
    <h2>About Us</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tortor purus, placerat ut dignissim a, luctus ut magna. Nam posuere, purus eget ornare pellentesque, enim dolor sagittis lectus, nec porttitor nulla libero id quam. Sed vitae est felis, vitae sodales libero. Sed consectetur adipiscing elementum. Suspendisse magna diam, mollis a malesuada ut, rutrum a libero. Donec eget libero elit. Sed non augue ac magna porttitor posuere. Integer malesuada lorem sed augue fermentum vitae dictum lorem semper. Aliquam aliquam, justo sed placerat fringilla, magna erat placerat orci, a tristique risus ante at urna. Proin aliquet enim eget purus auctor eu interdum augue sagittis. Curabitur at dictum diam. Mauris risus est, tristique nec lobortis ut, ullamcorper quis nulla.</p>
</div>

<div id="services">
    <h2>Services</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tortor purus, placerat ut dignissim a, luctus ut magna. Nam posuere, purus eget ornare pellentesque, enim dolor sagittis lectus, nec porttitor nulla libero id quam. Sed vitae est felis, vitae sodales libero. Sed consectetur adipiscing elementum. Suspendisse magna diam, mollis a malesuada ut, rutrum a libero. Donec eget libero elit. Sed non augue ac magna porttitor posuere. Integer malesuada lorem sed augue fermentum vitae dictum lorem semper. Aliquam aliquam, justo sed placerat fringilla, magna erat placerat orci, a tristique risus ante at urna. Proin aliquet enim eget purus auctor eu interdum augue sagittis. Curabitur at dictum diam. Mauris risus est, tristique nec lobortis ut, ullamcorper quis nulla.</p>
</div>

<div id="portfolio">
    <h2>Portfolio</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tortor purus, placerat ut dignissim a, luctus ut magna. Nam posuere, purus eget ornare pellentesque, enim dolor sagittis lectus, nec porttitor nulla libero id quam. Sed vitae est felis, vitae sodales libero. Sed consectetur adipiscing elementum. Suspendisse magna diam, mollis a malesuada ut, rutrum a libero. Donec eget libero elit. Sed non augue ac magna porttitor posuere. Integer malesuada lorem sed augue fermentum vitae dictum lorem semper. Aliquam aliquam, justo sed placerat fringilla, magna erat placerat orci, a tristique risus ante at urna. Proin aliquet enim eget purus auctor eu interdum augue sagittis. Curabitur at dictum diam. Mauris risus est, tristique nec lobortis ut, ullamcorper quis nulla.</p>
</div>

<div id="contact">
    <h2>Contact</h2>
    <form>
        <p>Name: <input type="text"></p>

        <p>Email: <input type="text"></p>

        <p>Message: <textarea></textarea></p>
    </form>
</div>



<div style="height:800px;background:#f5f5f5;"></div>

css

body{
    font-family: 'Droid Sans', serif;
    color:#444;
    font-size:1.2em;
}
.container{
    width:900px;
    margin:30px auto;
    padding:25px;
    min-height:400px;
    height:auto;
}
.container h2 { margin-top:30px;}
.nav{margin:0; padding:0;}
.nav li
{
    display: inline;
    margin:0 20px;
}

JS

$(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();

        var target = this.hash,
        $target = $(target);

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});