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异或加解密效果代码
Jun 25 Javascript
JavaScript中SQL语句的应用实现
May 04 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
浅谈javascript回调函数
Dec 07 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
Apr 16 Javascript
JavaScript从0开始构思表情插件
Jul 26 Javascript
简单的JS控制button颜色随点击更改的实现方法
Apr 17 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
Vue.set() this.$set()引发的视图更新思考及注意事项
Aug 30 Javascript
vue-cli3+typescript初体验小结
Feb 28 Javascript
深入分析JavaScript 事件循环(Event Loop)
Jun 19 Javascript
vue实现图片上传到后台
Jun 29 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 print EOF实现方法
2009/05/21 PHP
php上传apk后自动提取apk包信息的使用(示例下载)
2013/04/26 PHP
php输出金字塔的2种实现方法
2014/12/16 PHP
PHP处理二进制数据的实现方法
2016/06/13 PHP
PHP AjaxForm提交图片上传并显示图片源码
2016/11/29 PHP
jQuery ready函数滥用分析
2011/02/16 Javascript
js判断鼠标同时离开两个div的思路及代码
2013/05/31 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
2016/12/25 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
jQuery开源组件BootstrapValidator使用详解
2017/06/29 jQuery
JS库之ParticlesJS使用简介
2017/09/12 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
2018/08/22 Javascript
vue如何获取自定义元素属性参数值的方法
2019/05/14 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
2019/07/03 Javascript
小程序如何定位所在城市及发起周边搜索
2020/02/11 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
pyv8学习python和javascript变量进行交互
2013/12/04 Python
基于Python实现的百度贴吧网络爬虫实例
2015/04/17 Python
Python中将字典转换为XML以及相关的命名空间解析
2015/10/15 Python
python使用socket创建tcp服务器和客户端
2018/04/12 Python
简单了解python关系(比较)运算符
2019/07/08 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
Pytorch 搭建分类回归神经网络并用GPU进行加速的例子
2020/01/09 Python
python中count函数简单的实例讲解
2020/02/06 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
浅谈keras中Dropout在预测过程中是否仍要起作用
2020/07/09 Python
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
2016年七夕情人节宣传语
2015/11/25 职场文书
《鲁滨逊漂流记》之六读后感(4篇)
2019/09/29 职场文书
pytorch实现手写数字图片识别
2021/05/20 Python
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android