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 属性示例 -- 可以尝试编辑

实例:滚动锚点

<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:; padding:;}
.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;
});
});
});

JavaScript hash的更多相关文章

  1. Javascript: hash tables in javascript

    /** * Copyright 2010 Tim Down. * * Licensed under the Apache License, Version 2.0 (the "License ...

  2. Hash - a javascript dictionary object.

    Hash,in wikipedia, may relevant to many stuffs. In javascript, hash is a group of name/value pairs w ...

  3. javascript学习之BOM

    BOM是browser object model的缩写,简称浏览器对象模型.先看看下面这张图 window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象. ...

  4. 加密解密及其javascript实现

    前端提交数据到后台,如果不适用https协议,则提交的数据就有被第三者窃取的可能.前端使用js来编码数据主要分为以下三种: 1.摘要算法 2.对称加密 3.非对称加密 下面分别介绍三种算法中对应的一个 ...

  5. 关于hash

    http://rapheal.iteye.com/blog/1142955 关于javascript hash

  6. javascript 之 location.href、跨窗口调用函数

    location.href这个东西常常用于跳转,location既是window对象的属性,又是document对象的属性. JavaScript hash 属性 -- 返回URL中#符号后面的内容 ...

  7. Javascript实现MD5加密

    /* * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message * Digest Algorithm, as d ...

  8. java基础66 JavaScript中的事件、localtion对象、screen对象(网页知识)

    1.JavaScript中的事件注册 1.1.事件的注册方式 方式1:直接在html元素上注册 <body onLoad="ready()"></body > ...

  9. JS中使用MD5加密

    下载 MD5 使用MD5加密的方法:下载md5.js文件,在网页中引用该文件: < script type="text/javascript" src="md5.j ...

随机推荐

  1. PHP学习笔记(一)数组

    初始化数组的方法:统一初始化或逐项初始化. 遍历数组的方法: 1.FOR循环 2.DO...WHILE语句 3.WHILE语句 4.foreach foreach($arr as $key=>$ ...

  2. shell 文件合并,去重,分割

    第一:两个文件的交集,并集前提条件:每个文件中不得有重复行1. 取出两个文件的并集(重复的行只保留一份)2. 取出两个文件的交集(只留下同时存在于两个文件中的文件)3. 删除交集,留下其他的行1. c ...

  3. WebLogic Server

    前几天,看了几集J2ee , 给我的感觉就是,看不懂!! 一点也不懂! 那怎么办呢? 听老师的,不管懂不懂,先看看再说.接下来,就开始了J2ee "艰苦"的历程.在J2ee中,经常 ...

  4. 51nod1218 最长递增子序列 V2

    看见标签推荐顺便就做了吧 记$f[i], g[i]$为$i$的含$i$的前缀最长递增子序列和后缀递增子序列 只要满足$f[i] + g[i] == LIS + 1$,那么$i$就是可能的 对于$i$而 ...

  5. OpenSSL Heartbleed “心脏滴血”漏洞简单攻击示例

    OpenSSL Heartbleed漏洞的公开和流行让许多人兴奋了一把,也让另一些人惊慌了一把. 单纯从攻击的角度讲,我已知道的,网上公开的扫描工具有: 1.  Nmap脚本ssl-heartblee ...

  6. 谈HTTPS中间人攻击与证书校验(二)

    上文说到HTTPS的三次握手:http://www.cnblogs.com/wh4am1/p/6616851.html 不懂的再回头去看看 三.中间人攻击 https握手过程的证书校验环节就是为了识别 ...

  7. bzoj 3685: 普通van Emde Boas树

    3685: 普通van Emde Boas树 Description 设计数据结构支持:1 x  若x不存在,插入x2 x  若x存在,删除x3    输出当前最小值,若不存在输出-14    输出当 ...

  8. NOIP 解题有感

    算法方面: 在搜索问题上,包括贪心等没有固定算法的题目,还有输出格式(包括输入格式)特别容易出错.这也是解题选手的弱点. 1.做搜索题把步骤先用文字写下来,再转换成代码,以避免敲代码时疏漏某个条件. ...

  9. 37.递推:Pell数列

    总时间限制: 3000ms 内存限制: 65536kB 描述 Pell数列a1, a2, a3, ...的定义是这样的,a1 = 1, a2 = 2, ... , an = 2 * an − 1 + ...

  10. lightoj 1381 - Scientific Experiment dp

    1381 - Scientific Experiment Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://www.lightoj.com/vo ...