JQuery 实现返回顶部效果
首先要里了解一下几个知识
$(window).scrollTop() ---滚动条距顶部距离
fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的。
fadeOut() 方法使用淡出效果来隐藏被选元素,假如该元素是隐藏的。
该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。详细可参考:http://www.w3school.com.cn/jquery/effect_animate.asp
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Web.Default" %>
<!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 runat="server">
<title></title>
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<link href="Base.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.top
{
background: url("img/a.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
bottom: 32px;
display: block;
height: 58px;
position: fixed;
right: 18px;
width: 58px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
//首先将#back-to-top隐藏
$("#back-to-top").hide();
//当滚动条的位置处于距顶部10像素以下时,跳转链接出现,否则消失
$(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > 10) {
$("#back-to-top").fadeIn(1000);//淡入显示
}
else {
$("#back-to-top").fadeOut(1000);//淡出隐藏
}
});
//当点击跳转链接后,回到页面顶部位置
$("#back-to-top").click(function () {
$('body,html').animate({ scrollTop: 0 }, 300);
return false;
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1 style="text-align: center;">利用jQuery实现返回顶部效果</h1>
<div style="width: 800px; height:300px; border: 1px; text-align: left; margin:850px auto;">
。。。。。。(很多内容,可以滚动)
</div>
<a href="#" id="back-to-top" class="top" title="返回顶部"> </a>
</div>
</form>
</body>
</html>

JQuery 实现返回顶部效果的更多相关文章
- 一句jQuery代码返回顶部
一句jQuery代码返回顶部 效果体验: http://hovertree.com/texiao/yestop/ 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: ...
- js+JQuery实现返回顶部功能
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...
- 使用jquery实现返回顶部按钮
实现返回顶部效果,首先需要监听页面的scroll事件,其次才是获取到页面当前的滚动高度 $(window).scrollTop(); 具体代码如下: jquery获取页面元素的一些边界值(宽,高,滚动 ...
- javascript+JQuery实现返回顶部功能
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...
- jq-animate实现返回顶部效果
jq-animate实现返回顶部效果: <!doctype html> <html lang="en"> <head> <meta cha ...
- WEB返回顶部效果
1. PC端页面返回顶部效果 1 $( window ).scroll(function(){ 2 if( $( window ).scrollTop() > 500 ){ // 当顶部的滚动距 ...
- JavaScript实现返回顶部效果
仿淘宝回到顶部效果 需求:当滚动条到一定位置时侧边栏固定在某个位置,再往下滑动到某一位置时显示回到顶部按钮.点击按钮后页面会动态滑到顶部,速度由快到慢向上滑. 思路: 1.页面加载完毕才能执行js代码 ...
- 简约的返回顶部效果(jQuery)
博客建好也快一个月了,主题是在原有主题的基础上做的修改,喜欢这样的清新简约风格,为了更好的体验,以后也会经常做修改. 一般博客的文章都比较长,看到下面不能快速返回到顶部还真是不方便,今天自己动手写了一 ...
- jQuery 返回顶部效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- BZOJ 1635: [Usaco2007 Jan]Tallest Cow 最高的牛
题目 1635: [Usaco2007 Jan]Tallest Cow 最高的牛 Time Limit: 5 Sec Memory Limit: 64 MB Description FJ's N ( ...
- uva 10905 Children's Game (排序)
题目连接:uva 10905 Children's Game 题目大意:给出n个数字, 找出一个序列,使得连续的数字组成的数值最大. 解题思路:排序,很容易想到将数值大的放在前面,数值小的放在后面.可 ...
- [Ext JS 4] 布局之实战一 - 中间区块不会自动伸展 (tab)
前言 [Ext JS 4] 布局之实战一 - 中间区块不会自动伸展 (tab) 在上一篇中,中间的tab 区块无法自动伸展的原因一句话说就是: 使用contentEL的方式,相关HTML元素不会参与组 ...
- tomcat的JK和JK2
如今又開始配置JK2,想将Tomcat和apache,但Tomcat上已经不支持对于JK2的开发了,详情请看: Apache-Tomcat mod_jk2 aka JK2 15 November - ...
- VS C++工程类成员初始化检测脚本
最近项目中出现由类成员未初始化而进行读写而造成的问题,于是想将项目中所有的为初始化的地方找出来,优化一下代码,维护了这么多年的程序已有百万余行且VS2015还尚未支持检查类成员初始化的方法.,于是想写 ...
- objective-C学习笔记(五)函数成员:初始化器和析构器
初始化器:init 对象初始化器: -(id)init 可以重载多个. 类型初始化器: +(id)initialize只能有一个. 对象初始化器: 初始化对象实例时,init通常和alloc(手动内存 ...
- 关于已经安装python为何还要安装python-dev
linux发行版通常会把类库的头文件和相关的pkg-config分拆成一个单独的xxx-dev(el)包. 以python为例, 以下情况你是需要python-dev的 你需要自己安装一个源外的pyt ...
- Symfony命令行
Available commands: help 显示命令的帮助信息 list ...
- 编写带参数decorator
无参的@log装饰器: def log(f): def fn(x): print 'call ' + f.__name__ + '()...' return f(x) return fn 发现对于被装 ...
- 什么是PCB改板及PCB改板应注意的问题
PCB改板是指在保持原有功能一致的前提下,对原有产品设计及电路板布局走线设计的基础上进行整改设计,调整板上器件布局与线路走向,实现电子产品重新设计研发,同时又可以规避知识产权等纠纷,加快新产品研发速度 ...