ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果


Posted in Javascript onFebruary 03, 2012

要实现该效果,首先要先了解以下几点基础知识:
窗体滚动事件:$(window).scroll(function(){...});
获取窗体滚动距离:$(window).scrollTop();
获取窗体高度:$(window).height();
了解以上内容就可以实现通过hyperlink控件实现返回顶部的效果了。
1.准备界面结构代码:

<form id="form1" runat="server"> 
<div> 
<asp:HyperLink ID="Top" runat="server"></asp:HyperLink> 
<h1 style="text-align: center"> 
利用jQuery实现返回顶部效果</h1> 
<div style="width: 800px; border: 1px; text-align: left; margin-left: 230px;"> 
。。。。。。(很多内容,可以滚动) 
</div> 
<asp:HyperLink ID="backToTopLink" runat="server" CssClass="backToTop">回顶部</asp:HyperLink> 
</div> 
</form>

2.给回顶部控件添加样式:
<style type="text/css"> 
.backToTop 
{ 
background-color: Yellow; 
width: 30px; 
border-style: outset; 
border-width: 1px; 
text-align: center; 
font-weight: bold; 
font-family: Arial; 
font-size: x-large; 
cursor: pointer; 
position:absolute; // 注意要设置为绝对位置 
right: 100px; 
} 
</style>

3.添加实现置顶效果脚本代码:
<script type="text/javascript"> 
$(document).ready(function () { 
$("#backToTopLink").attr("title", "回顶部"); 
$("#backToTopLink").attr("href", "#Top"); // 通过链接实现置顶 
$(window).scroll(function () { 
if ($(window).scrollTop() <= 100) { 
$("#backToTopLink").fadeOut(200); 
} 
else { 
$("#backToTopLink").fadeIn(400); 
} 
var v_Top = $(window).height() - $(".backToTop").height() - 10 + $(window).scrollTop(); // 动态计算滚动后置顶按钮top位置 
$(".backToTop").css("top", v_Top + "px"); 
}); 
}); 
</script>

注意,本代码只是为了演示hyperlink控件来实现返回顶部的效果。还可以通过jQuery的动画效果,实现平滑置顶。
平滑过渡返回顶部代码如下:
$('#backToTopLink').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); // 替换$("#backToTopLink").attr("href", "#Top");即可
Javascript 相关文章推荐
js仿百度有啊通栏展示效果实现代码
May 28 Javascript
通过$(this)使用jQuery包装后的方法或属性
May 18 Javascript
浅谈EasyUI中编辑treegrid的方法
Mar 01 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
Mar 28 Javascript
jQuery插件制作的实例教程
May 16 Javascript
JS装饰器函数用法总结
Apr 21 Javascript
Vue中的vue-resource示例详解
Nov 02 Javascript
vue实现微信获取用户信息的方法
Mar 21 Javascript
小程序两种滚动公告栏的实现方法
Sep 17 Javascript
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 Javascript
关于element-ui表单中限制输入纯数字的解决方式
Sep 08 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
Feb 03 #Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
Feb 03 #Javascript
jQuery表单验证插件formValidator(改进版)
Feb 03 #Javascript
jQuery.extend 函数详解
Feb 03 #Javascript
jquery插件开发方法(初学者)
Feb 03 #Javascript
jquery插件制作简单示例说明
Feb 03 #Javascript
jQuery数组处理代码详解(含实例演示)
Feb 03 #Javascript
You might like
PHP中__get()和__set()的用法实例详解
2013/06/04 PHP
php实现word转html的方法
2016/01/22 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
JQuery Tips(4) 一些关于提高JQuery性能的Tips
2009/12/19 Javascript
ajax更新数据后,jquery、jq失效问题
2011/03/16 Javascript
js调试系列 控制台命令行API使用方法
2014/06/18 Javascript
JavaScript中的toUTCString()方法使用详解
2015/06/12 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
快速入门Vue
2016/12/19 Javascript
JS异步文件分片断点上传的实现思路
2016/12/25 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
[04:09]显微镜下的DOTA2第十二期—NaVi美如画的团战
2014/06/23 DOTA
python thread 并发且顺序运行示例
2009/04/09 Python
Python实现树莓派WiFi断线自动重连的实例代码
2017/03/16 Python
python psutil库安装教程
2018/03/19 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
Django objects的查询结果转化为json的三种方式的方法
2018/11/07 Python
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
Python3实现的反转单链表算法示例
2019/03/08 Python
11个Python Pandas小技巧让你的工作更高效(附代码实例)
2019/04/30 Python
Python绘图实现显示中文
2019/12/04 Python
pytorch使用 to 进行类型转换方式
2020/01/08 Python
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
什么是Connection-oriented Protocol/Connectionless Protocol面向连接的协议/无连接协议
2012/09/06 面试题
土木工程实习生自我鉴定
2013/09/19 职场文书
毕业自我评价
2014/02/05 职场文书
校庆团日活动总结
2014/08/28 职场文书
2014党员民主评议个人总结
2014/09/10 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书
运动会主持人开幕词
2016/03/04 职场文书
MySQL 用 limit 为什么会影响性能
2021/09/15 MySQL
python神经网络 使用Keras构建RNN训练
2022/05/04 Python
MySQL深分页问题解决思路
2022/12/24 MySQL