jquery实现跳到底部，回到顶部效果的简单实例(类似锚)
更新时间：2016年07月10日 10:22:37 投稿：jingxian
下面小编就为大家带来一篇jquery实现跳到底部，回到顶部效果的简单实例(类似锚)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
实例如下：
<!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="Content-Type" content="text/html; charset=utf-8" />
<title>jquery实现跳到底部，回到顶部效果的简单实例(类似锚)</title>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function(){
$('#top').click(function(){$('html,body').animate({scrollTop: '0px'}, 1000);return false;});
$('#foot').click(function(){$('html,body').animate({scrollTop: $('#footer').offset().top},1000);return false;});
})
</script>
</head>
<body>
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<a href="#" id="foot">跳到底部</a>
<br/><br /><br /><br />
<br/><br /><br /><br />
<br/><br /><br /><br />
<br/><br /><br /><br />
<br/><br /><br /><br />
<br/><br /><br /><br />
<br/><br /><br /><br />
<br/><br /><br /><br />
<br/><br /><br /><br />
<br/><br /><br /><br />
<br/><br /><br /><br />
<a href="#" id="top"> 返 回 顶 部 </a>
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<a name="footer" id="footer"></a>
</body>
</html>
以上这篇jquery实现跳到底部，回到顶部效果的简单实例(类似锚)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。本文主要介绍JQuery阻止事件冒泡的实例解析。需要的朋友来看下吧2016-12-12
背景颜色，比如换个心情之类的，需要记住这样的一个状态，下面为大家介绍下利用cookie记住背景颜色的具体实现，感兴趣的朋友不要错过2013-11-11
这篇文章主要介绍了jQuery插件编写步骤,详细分析了jQuery实现插件功能的具体步骤与相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2016-06-06
在JavaScript的jQuery库中操作AJAX的方法讲解
这篇文章主要介绍了在JavaScript的jQuery库中操作AJAX的方法讲解,包括利用jQuery简化Ajax开发部分的内容,需要的朋友可以参考下2015-08-08
Jquery.LazyLoad.js修正版下载，实现图片延迟加载插件
之前一直有关注过Jquery.LazyLoad.js这个特效，但一直没有用，这几天研究了一下，并应用于实际中，对网站SEO方面没有什么帮助，不过可以节省一些流量，对于大网站来说显的尤为重要，至于节省了多少流量我无从统计。2011-03-03
这篇文章主要介绍了jQuery实现“扫码阅读”功能方法的相关资料,需要的朋友可以参考下2015-01-01
jquery validate 实现动态增加/删除验证规则操作示例
这篇文章主要介绍了jquery validate 实现动态增加/删除验证规则操作,结合实例形式分析了jQuery validate表单验证相关操作技巧,需要的朋友可以参考下2019-10-10
这篇文章主要介绍了jQuery基于json与cookie实现购物车的方法,涉及jQuery操作json格式数据与cookie存储购物车信息的相关技巧,需要的朋友可以参考下2016-04-04
这篇文章主要介绍了jQuery中scrollLeft()方法用法,实例分析了scrollLeft()方法的功能、定义及获取或设置匹配元素相对滚动条左侧的偏移(offset)量时的使用技巧,需要的朋友可以参考下2015-01-01
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
JQuery在IE8兼容性视图模式下操作Select的Options的Bug在本文进行重现并给出详细的解决方法，感兴趣的朋友可以参考下哈，希望对你有所帮助2013-04-04
最新评论