JQ 滑动锚链接

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>

<body>

<script>

$(window).scroll(function(){

var targetTop = $(this).scrollTop();

if(targetTop>900){

$(‘#mrt‘).css(‘display‘,‘block‘);

}else{

$(‘#mrt‘).css(‘display‘,‘none‘);

}

});

$(function(){

$("ul li a").click(function(){

var hr = $(this).attr("href");

var anh = $(hr).offset().top;

$("html,body").stop().animate({scrollTop:anh},2000);

return false;    //防止重新加载

});

})

</script>

<style>

ul{

position:fixed;

top:0;

background:#999999;

}

ul li{

float:left;

margin:10px;

padding:10px;}

</style>

<ul>

<li><a href="#us">111111</a></li>

<li><a href="#about">22222</a></li>

<li><a href="#prouct">33333</a></li>

<li><a href=‘http://www.baidu.com‘>44444</a></li>

<li>55555</li>

<li>66666</li>

</ul>

<div id=‘mrt‘ style=‘width:200px; display:none; height:200px; COLOR:WHITE; position:fixed; top:50px;‘>asdasdasdASSSSSS</div>

<div style="clear:both;"></div>

<div id="us" style="height:820px; background:#6699CC; width:100%;"></div>

<div id="about" style="height:820px; background:#0066CC; width:100%;"></div>

<div id="prouct" style="height:820px; background:#003366; width:100%;"></div>

</body>

</html>

时间: 2024-08-29 19:20:42

JQ 滑动锚链接的相关文章

img,a,锚链接,超链接

1.图片标签:img,单标签 图片属性: src(source): 图片的来源(路径),可以放置本地图片,也可以放网上的图片的url地址 title: 当鼠标停留在图片上的时候,显示提示的文字 alt:当文件找不到的时候,显示提示文字 width:宽度 height: 高度 2.路径: 绝对路径(一般不用):指的是文件在计算机里面的位置 相对路径(使用):用户工作目录开始的路径(路径的拼接使用/) ./:当前目录 ../:跳出当前目录,到上一目录 3.超链接:点击跳转,a 超链接的属性:href

手风琴图片和钢琴导航栏JQ滑动特效

手风琴JQ滑动特效 1.效果预览: 2.相关代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../jquery-1.9.1/jquery-1.9.1/jquery.js"></script> <

超链接和锚链接

<a href=" " tarhet=" ">XXXX</a> href:要跳转的文件路径名称 target:_self(目标页面覆盖当前的页面) _blank(目标页面弹出心的框来显示) 锚链接 创建步骤: 第一步:创建锚点 <a name="锚点">XXXX</a> 第二步:访问锚点链接 <a href="#锚点">XXX</a> 功能性作用 <

html锚链接

锚点(anchor):其实就是超链接的一种,一种特殊的超链接 普通的超链接,<a href="路径"></a> 是跳转到不同的页面 而锚点,<a href="路径"></a> 可以在同一个页面中不同的位置间跳转 可以看到,跳转到锚点的超链接跟普通的超链接格式是一样的, 1.使用锚点的步骤: 1.1.先建立锚点目标, 如上所述,锚点可以在同一页面的不同位置间跳转,其实就是在元素间跳转, 常用的场景就是,页面很长,让用户方

锚链接

1.同页面锚文本-同页面内上下转到指定位置常常看见我们页面底部点击 “回到顶部”链接就会转到网页顶部实现. 1.在网页添加一个<!--被定位的--> <span id="top" name="top"></span> 2.点击后跳转到被定位的位置(用到a标签)  <!--点击跳转--> <a href="#top">回到顶部</a> 2.多数用于文章标题的跳转 .跳转外部页面

JQ滑动导航菜单的实现

前言:不多说直接看效果!!! 这样的菜单我们在一般的网站上见到的也比较多,有比较好的用户体验! 原理:这个很重要,任何的特效只要原理搞明白了,实现起来都是很容易的!这个特效的原理很简单,菜单的样式我们都很容易实现就是一些CSS而已! 中间那个滑块其实就是一个定位为:absolute 的元素,每当鼠标放到一个A元素上的时候用JQ获取到当前A元素的位置和宽度,再用JQ的animate方法,以动画的形式给元素即可! 当然你在这里也可以也一些其它的动画 1.DOM结构   <div class="

平滑滚动-锚链接

老代码了 demo1: var ss = { fixAllLinks: function() { // Get a list of all links in the page var allLinks = document.getElementsByTagName('a'); // Walk through the list for (var i=0;i<allLinks.length;i++) { var lnk = allLinks[i]; if ((lnk.href && ln

HTML学习笔记——锚链接、pre标签、实体

1>锚链接 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="

jQ插件--时间线插件和拖拽API

这个时间轴是工作上用到的,自己写了一个, qq空间有时间轴的控件, 百度文库也有时间轴的控件: 百度的时间轴大概是这样的: 用户点击对应的锚链接,  那个三角会滚动, 然后左侧的界面也会滚动: 实际的效果如下图,用户点击左侧的按钮或者右侧的input,滚动条都会主动滚动, 这里有个小技巧就是用after和before伪类生成三角形, 用户点击按钮的滚动效果直接用jq的animate方法: 点击查看DEMO:打开 <!-- //设置内容; window.onWebMessage( '{"ty