在网页中我们经常会碰到当我们浏览网页的内容大于一页时，网页中提示返回顶部按钮，当我们点击一下就可以返回到开始浏览网页的顶部，或者某些网页中的广告会随着网页的滑动儿一直固定在网页的某个位置。下面以一个例子来实现这些功能。
该程序的功能有三个
1、当网页内容大于一页时，在浏览器的底部会出现返回顶部按钮
2、该按钮会一直固定在网页的底部，不会随着浏览器在竖直方向平滑页面而消失
3、当点击该按钮时，会自动返回网页的顶部位置
用jquery具体实现如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="javascript" src="${pageContext.request.contextPath}/script/jquery.js"></script>
<style type="text/css">
.fixed_div {
position: fixed;
bottom: 10px;
width: 400px;
right: 2px
}
</style>
<script type="text/javascript">
$(document).ready(function(){
//$(function(){
//获取要定位元素距离浏览器顶部的距离
var navH = $(".nav").offset().top;
$(window).scroll(function(){
//获取滚动条的滑动距离
var scroH = $(this).scrollTop();
//if ($(window).scrollTop()>50)
//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定
if(scroH>navH)
{
$("#back-to-top").fadeIn(1000);
}
else
{
$("#back-to-top").fadeOut("fast");
}
});
//当点击跳转链接后，回到页面顶部位置
$("#back-to-top").click(function(){
$('body,html').animate({scrollTop:0},1000);
return false;
});
});
</script>
</head>
<body>
<div class="fixed_div" id="back-to-top" style="display: none">
<a href="" >回到顶部</a>
</div>
<p class="nav">这是第一行</p>
<p>这是第二行</p>
<p>这是第三行</p>
<p>这是第四行</p>
<p>这是第五行</p>
<p>这是第六行</p>
<p>这是第七行</p>
<p>这是第八行</p>
<p>这是第十行</p>
<p>这是第十一行</p>
<p>这是第十二行</p>
<p>这是第十三行</p>
<p>这是第十四行</p>
<p>这是第十五行</p>
<p>这是第十六</p>
<p>这是第十七行</p>
<p>这是第十八行</p>
<p>这是第十九行</p>
<p>这是第二十行</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
</body>
</html>
就可以实现这些功能。
相关推荐
- 当`scrollTop`大于预设值时，显示返回顶部按钮：`$('.back-to-top').fadeIn();` - 反之，隐藏返回顶部按钮：`$('.back-to-top').fadeOut();` - 添加点击事件，点击按钮平滑返回顶部：`$('.back-to-top').click...
当页面滚动时(监听scroll事件)，浏览器滚动条处于最顶部时，隐藏“返回顶部”按钮，当滚动条继续向下滚动时，动态计算出当前可视窗口的高度-按钮高度-按钮距浏览器下边缘高度得到的值，如果这个值大于某个特定的数字...
在网页设计中，"返回顶部"功能是一种常见的用户体验优化，它允许用户轻松地将滚动条重置到页面的顶部，而无需手动滚动。本实例主要介绍如何使用jQuery库实现这一功能。jQuery是一个强大的JavaScript库，它简化了...
在网页设计和开发中，jQuery 是一个非常流行的 JavaScript 库，它简化了DOM操作、事件处理、动画效果等任务。"jquery火箭上升回页面顶部"这个主题涉及到的是使用jQuery实现一个功能，即当用户点击一个按钮或链接时，...
4. 监听滚动事件`$(window).scroll()`, 当满足条件（如滚动距离大于一定值）时，显示返回顶部按钮。 5. 为返回顶部按钮绑定点击事件`$('a.return-to-top').click()`, 在事件处理函数中调用`$('html, body').animate...
在网页设计中，有时我们需要实现一些交互效果来提升用户体验，比如在鼠标悬停时显示特定内容，以及在页面滚动时出现返回顶部的按钮。在这个项目中，“jquery右侧固定层鼠标悬停微信图标显示二维码和页面滚动显示返回...
在网页开发中，jQuery 是一个非常流行的 JavaScript 库，它提供了丰富的功能来简化 DOM 操作、事件处理和动画效果。本篇文章将详细讲解如何利用 jQuery 实现“滑动到页面顶端”的效果，这是一种常见的用户体验优化...
// 如果页面滚动距离大于500像素，显示返回顶部按钮 if ($(this).scrollTop() > 500) { $("#gotoTop").fadeIn(200); // 使用淡入效果显示 } else { $("#gotoTop").fadeOut(200); // 页面滚回顶部，淡出按钮 } ...
这篇博客将深入探讨如何使用jQuery创建一个返回顶部的组件，并结合源码分析其工作原理。 首先，我们需要理解jQuery的基本概念。jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和...
在如今的Web开发中，为页面添加“返回顶部”功能是一种常见且用户友好的操作，它能极大地提升用户的浏览体验，尤其当页面内容较长时。本文主要介绍如何使用jQuery结合原生JavaScript实现返回顶部的功能。 知识点一...
在网页设计中，返回顶部的功能是一项实用且常见的交互设计，它可以帮助用户快速回到页面的起始位置。在本文中，我们将探讨如何使用jQuery库来实现这个功能。jQuery是一个轻量级、高性能的JavaScript库，它简化了DOM...
在网页设计中，为了提供更好的用户...总之，"jQuery右侧微信返回顶部特效代码"是提升网页用户体验的一个实用工具，通过巧妙运用jQuery和CSS，可以在页面滚动时提供类似微信的返回顶部功能，增加网站的互动性和专业性。
一、引言 在web页面中，如果页面较高，为了方便用户快速地返回顶部，都会添加一个返回顶部按钮。 其中淘宝网的是要滚动条的滚动距离大于某一段距离才显示返回顶部按钮；人人网的返回顶部直接在底部的工具条上；新浪...
本知识点主要介绍如何使用jQuery这一流行的JavaScript库来实现当用户在页面中滚动到一定位置时，自动显示“返回顶部”按钮，并且当用户点击该按钮后，页面能够平滑滚动回页面顶部的功能。 具体实现方法如下： 1. ...
"jQuery平滑返回顶部特效代码"是专门为网页开发者设计的一种实用工具，它利用jQuery库为网页添加了一个优雅的动画效果，使得用户能够轻松地从页面底部平滑地滚动回页面顶部。 jQuery是一个轻量级的JavaScript库，它...
在网页设计中，"回到顶部"功能是一种常见的用户体验优化手段，它允许用户快速地将页面滚动条返回到页面的起始位置。在这个"js&jquery回到顶部.zip"压缩包中，包含的资源主要展示了如何使用JavaScript（js）和jQuery...
在现代网页设计中，返回顶部功能已成为一种常见的交互元素，能够提升用户体验，使得用户在浏览长页面时能够快速返回页面顶部。本文将详细介绍如何使用JavaScript和JQuery实现这一功能。 首先，我们需要在HTML中添加...
在网页设计中，返回顶部的功能是一项常见的交互设计，它允许用户快速回到页面的顶部，而无需手动滚动。本文将详细讲解如何使用jQuery和CSS来实现这个功能。 首先，我们需要了解CSS部分。这段CSS代码定义了一个类名...