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 ...
随机推荐
- makefile简单helloworld
最近要在unix系统上开发c++应用程序,但默认情况下unix编译c++程序需要使用makefile.其实makefile语法还是比较简单,看上去有点像ant.废话不说了,直接上helloworld. ...
- Android应用开发基础篇(1)-----Button
Android应用开发基础篇(1)-----Button 一.概述 Button,顾名思义就是按钮的意思,它主要的功能是响应用户按下按钮时的动作. 二.应用 新建一个工程, ...
- NGUI Button 3中点击事件的触发
NGUI事件的种类很多,比如点击.双击.拖动.滑动等等,他们处理事件的原理几乎万全一样,本文只用按钮来举例. 1.直接监听事件 把下面脚本直接绑定在按钮上,点击按钮触发的方法名必须为OnClick,当 ...
- GDI+ 对象释放崩溃的问题
确保在Gdiplus::GdiplusShutdown(m_gdiplusToken); 之前delete 掉GDI+的对象,例如:delete *pBitmap; 如果先Gdiplus::Gdipl ...
- HDOJ 3415 Max Sum of Max-K-sub-sequence(单调队列)
因为是circle sequence,可以在序列最后+序列前n项(或前k项);利用前缀和思想,预处理出前i个数的和为sum[i],则i~j的和就为sum[j]-sum[i-1],对于每个j,取最小的s ...
- centos7 ops
默认使用firewall防火墙,不在使用iptables 特点:可以动态加载新设置的规则,而不用重启服务 scp操作: scp localfile user@host:remotedir mysql. ...
- C part 1 -- 指令篇
Windows系统的cmd(command命令行工具): Shutdown -s -t 600:表示600秒后自动关机 Shutdown -a :可取消定时关机 Shutdown -r -t 600: ...
- Spark学习资料
1. 倾情大奉送--Spark入门实战系列 2. Spark GraphX: http://blog.csdn.net/bluejoe2000/article/details/44308167
- 调用firebug-lite调试ie6
作为前端或网页开发者而言,在IE6上做CSS调试在之前简直是一个噩梦.作为前端或网页开发者而言,但这又是无法回避的事情.某日从红茶那边听说了Firebug Lite这个好东西,可以在不装插件的情况下, ...
- QT全局热键(用nativeKeycode封装API,不跨平台)
在网上找了很长时间,大家都提到了一个QT全局热键库(qxtglobalshortcut),支持跨平台.在这篇文章中,我将只展示出windows平台下全局热键的设置. 这里提供的方法是在MyGlobal ...