<!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>
<title>Untitled Page</title>
<script type="text/javascript" src=jquery-1.8.0.js></script>
<script>
$(document).ready(function () {
//当点击顶部按钮的时候，执行方法,scrollTop属性获取选中标签距滚动条的距离。
$('#top').click(function () {
$('html').animate(
{ scrollTop: '0px' }, 1000
);
});
//当点击底部标签时候，执行方法，其中offset()获取匹配元素在当前视口的相对偏移,返回的是一个对象，有两个属性top,left
//animate,的第二个属性当然我们也可以设置'slow','normal'或'fast'
$('#foot').click(function () {
$('html').animate(
{scrollTop:$('span').offset().top},1000
);
});
});
</script>
</head>
<body>
<br /> <br /> <br /> <br /> <br />
<a href="#" id="foot">底部</a>
<br /> <br /> <br /> <br /> <br />
<br /> <br /> <br /> <br /> <br />
<a href="#" id="top">顶部</a>
<br /> <br /> <br /> <br /> <br />
<span></span>
</body>
</html>
分享到：
相关推荐
jQuery实现一个动画版缓动返回顶部和底部的效果，里面附有demo，可以根据需求直接修改
知识点如下： 1. jQuery基础概念：jQuery是一个快速、简洁的JavaScript库，它通过封装JavaScript...通过上述知识点的介绍，我们可以更好地理解在HTML页面中使用jQuery实现跳转到顶部或底部动画效果的原理和技术细节。
本文将详细探讨如何使用JQuery实现返回顶部和底部的特效。 首先，我们需要在HTML文档中添加必要的结构。为了实现返回顶部的按钮，可以在页面底部添加一个锚点元素，例如： ```html <a id="top"></a> 返回顶部 ``` ...
本文将深入探讨“jQuery动画滑动回到顶部和底部”的javascript特效代码，帮助开发者了解并实现这一功能。 首先，让我们理解这个特效的基本概念。在网页浏览时，用户可能需要快速回到页面顶部（例如，点击页面右下角...
网页模板设计中，jQuery的运用可以为用户带来丰富的交互体验，尤其在实现滚动到网站页面底部时自动弹出对话框的功能上，它显示了强大的功能和灵活性。这个压缩包文件"网页模板——jQuery实现滚动到网站页面底部动画...
这个“js返回顶部/底部demo Jquery返回顶部/底部案例”是一个示例，展示了如何使用JavaScript和jQuery库来实现这样的功能。在这个案例中，我们将深入探讨如何使用HTML、CSS和JavaScript/jQuery来创建这些实用的交互...
jquery滚动到顶部底部是一款简单的滚动到顶部底部控制jQuery插件。是一个很实用的功能，他能帮助新手和高级开发者们创造美好的用户体验。 jquery滚动到顶部底部仅向上效果： 点击查看演示： jquery滚动到顶部...
本教程将详细讲解如何使用jQuery库来实现这种平滑的返回顶部的滑动跳转效果。 首先，jQuery是一个强大的JavaScript库，它简化了JavaScript的DOM操作，事件处理，动画以及Ajax交互。在这个效果中，jQuery的动画功能...
【jQuery网站底部动态波浪背景动画特效】是一种创新的网页设计技术，主要应用于服务器和云计算服务提供商的网站，旨在提升用户体验并为网页增添活力。这种特效通过jQuery库实现，jQuery是一个广泛使用的JavaScript库...
Demo 用jQuery实现最简单的滚屏效果2(加了上下按钮 ...Demo 用jQuery实现最简单的滚屏效果2(加了上下按钮Demo 用jQuery实现最简单的滚屏效果2(加了上下按钮Demo 用jQuery实现最简单的滚屏效果2(加了上下按钮
《jQuery实现返回顶部和底部浮窗特效》 在网页设计中，为了提升用户体验，经常会用到返回顶部和底部的功能，特别是在内容丰富的页面中。本文将详细介绍如何利用jQuery库来实现这两种常见的页面特效。 首先，jQuery...
2. JavaScript文件：通常以.js为扩展名，包含jQuery代码以实现返回顶部和底部的功能，以及可能的留言处理逻辑。 3. CSS文件：可能以.css为扩展名，定义了浮窗及按钮的样式。 4. 图像文件：可能包括箭头图标和其他...
本文将详细介绍如何使用 jQuery 实现“返回顶部”的功能。 ### 一、HTML 结构 首先，我们需要在页面底部添加一个“返回顶部”的按钮，通常将其设置为一个链接元素（`<a>`），并隐藏在页面的角落里，如右下角： ``...
在这个例子中，我们将探讨如何使用 jQuery 实现页面滚动到顶部和底部的动画效果，只需要两行代码就能轻松实现。 首先，我们需要引入 jQuery 库。在示例代码中，使用的是 jQuery 1.8.0 版本，通过 `<script>` 标签...
这个压缩包文件"jQuery实现带底部返回顶部按钮功能特效源码.zip"包含了一个使用jQuery库实现的这种功能的源代码示例。jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务，...
这可以通过监听`scroll`事件和使用`animate`函数来实现： ```javascript $(document).ready(function() { // 当页面滚动超过50px时显示返回顶部按钮 $(window).scroll(function() { if ($(this).scrollTop() > ...
是一款效果非常酷的jQuery和CSS3通过AJAX调用切换页面过渡动画特效插件。该页面切换特效使用AJAX来动态加载链接内容，在页面加载的时候，使用CSS3来制作非常酷的页面过渡动画效果。插件中使用pushState方法来管理...