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 属性示例 -- 可以尝试编辑
实例:滚动锚点
<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的更多相关文章
- Javascript: hash tables in javascript
/** * Copyright 2010 Tim Down. * * Licensed under the Apache License, Version 2.0 (the "License ...
- Hash - a javascript dictionary object.
Hash,in wikipedia, may relevant to many stuffs. In javascript, hash is a group of name/value pairs w ...
- javascript学习之BOM
BOM是browser object model的缩写,简称浏览器对象模型.先看看下面这张图 window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象. ...
- 加密解密及其javascript实现
前端提交数据到后台,如果不适用https协议,则提交的数据就有被第三者窃取的可能.前端使用js来编码数据主要分为以下三种: 1.摘要算法 2.对称加密 3.非对称加密 下面分别介绍三种算法中对应的一个 ...
- 关于hash
http://rapheal.iteye.com/blog/1142955 关于javascript hash
- javascript 之 location.href、跨窗口调用函数
location.href这个东西常常用于跳转,location既是window对象的属性,又是document对象的属性. JavaScript hash 属性 -- 返回URL中#符号后面的内容 ...
- Javascript实现MD5加密
/* * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message * Digest Algorithm, as d ...
- java基础66 JavaScript中的事件、localtion对象、screen对象(网页知识)
1.JavaScript中的事件注册 1.1.事件的注册方式 方式1:直接在html元素上注册 <body onLoad="ready()"></body > ...
- JS中使用MD5加密
下载 MD5 使用MD5加密的方法:下载md5.js文件,在网页中引用该文件: < script type="text/javascript" src="md5.j ...
随机推荐
- HTML5实战与剖析之字符集属性(charset和defaultCharset)
HTML5对字符集属性也进行了更新,其中charset和defaultCharset属性就是HTML5中新添加的字符集属性.有关charset和defaultCharset属性的具体讲解尽在HTML5 ...
- dump调试函数
//dump调试函数if (!function_exists('dump')) { /* * dump调试函数 */ function dump($var) { $traces = debug_bac ...
- Linux内存管理中的slab分配器
转载自:http://edsionte.com/techblog/archives/4019 Linux内核中基于伙伴算法实现的分区页框分配器适合大块内存的请求,它所分配的内存区是以页框为基本单位的. ...
- java 数组的基本概念
1.数组的基本概念 数组指的是一组相关变量的集合.例如:如果说现在要定义100个整型变量,如果按照我们以前的思路,我们可能这样定义: public class demo { public static ...
- MySQL笔记(五)之表的连接
MySql数据库中表的连接一共有如下几种 INNER JOIN 内连接 语法: SELECT column_name(s) FROM table_name1 INNER JOIN table_name ...
- 初识Linux 基础操作(2)
1.Linux启动流程 1).linux启动过程 ①.进入grub界面选择相应的启动内核 ②.读取kernel内核文件-/boot/vmlinuz-* ...
- luoguP3255 [JLOI2013]地形生成 动态规划
出题人语文真好... 各不相同的标号和高度 = 各不相同的标号 + 单独的高度... 第一问比较简单,考虑从大到小插入,在相同情况下,按关键值从小到大插入 这样子,关键大的元素一定会影响到关键小的元素 ...
- [CodeForces-178F]Representative Sampling
题目大意: 给你n个字符串,要求从中选出k个字符串,使得字符串两两lcp之和最大. 思路: 动态规划. 首先将所有的字符串排序,求出相邻两个字符串的lcp长度(很显然,对于某一个字符串,和它lcp最长 ...
- [bzoj1022][SHOI2008]小约翰的游戏 John (博弈论)
Description 小约翰经常和他的哥哥玩一个非常有趣的游戏:桌子上有n堆石子,小约翰和他的哥哥轮流取石子,每个人取的时候,可以随意选择一堆石子,在这堆石子中取走任意多的石子,但不能一粒石子也不取 ...
- Codeforces Round #346 (Div. 2) E. New Reform dfs
E. New Reform 题目连接: http://www.codeforces.com/contest/659/problem/E Description Berland has n cities ...