编程 Javascript

jquery实现跳到底部，回到顶部效果的简单实例(类似锚)

Posted in Javascript onJuly 10, 2016

实例如下：

<!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实现跳到底部，回到顶部效果的简单实例(类似锚)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

对google个性主页的拖拽效果的js的完整注释[转]

Apr 10 Javascript

javascript操作cookie的文章(设置，删除cookies)

Apr 01 Javascript

两个Javascript小tip资料

Nov 23 Javascript

解析js中获得父窗口链接getParent方法以及各种打开窗口的方法

Jun 19 Javascript

jquery实现图片上传之前预览的方法

Jul 11 Javascript

JavaScript原生节点操作小结

Jan 17 Javascript

jQuery中DOM节点删除之empty与remove

Jan 20 Javascript

javascript使用btoa和atob来进行Base64转码和解码

Mar 20 Javascript

JS实现遍历不规则多维数组的方法

Mar 21 Javascript

详解Vue项目中出现Loading chunk {n} failed问题的解决方法

Sep 14 Javascript

vue中过滤器filter的讲解

Jan 21 Javascript

javascript实现画板功能

Apr 12 Javascript

JS实现点击事件统计的简单实例

Jul 10 #Javascript

JS 面向对象之继承---多种组合继承详解

Jul 10 #Javascript

js生成随机数(指定范围)的实例代码

Jul 10 #Javascript

JS获取随机数和时间转换的简单实例

Jul 10 #Javascript

JS生成不重复的随机数组的简单实例

Jul 10 #Javascript

浅谈JavaScript对象与继承

Jul 10 #Javascript

Bootstrap框架下下拉框select搜索功能

Mar 26 #Javascript