隐藏html5回到顶部,用jQuery实现的智能隐藏、滑动效果的返回顶部代码

在线DEMO：传送门

HTML代码(放在页面任意位置，并用CSS美化)：

回到顶部

JS代码：

$(document).ready(function() {

//首先将#back-to-top隐藏

$("#back-to-top").hide();

//当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失

$(function() {

$(window).scroll(function() {

if ($(window).scrollTop() > 100) {

$("#back-to-top").fadeIn(1500);

} else {

$("#back-to-top").fadeOut(1500);

}

});

//当点击跳转链接后，回到页面顶部位置

$("#back-to-top").click(function() {

$('body,html').animate({

scrollTop: 0

1000);

return false;

});

下面再来一个简单点的返回顶部的代码：

完整代码：

基于jquery的返回顶部效果

#goTop{position:absolute;display:none;width:50px;height:48px;background:#fff url(//img.jbzj.com/file_images/article/201601/gotop.png) no-repeat 16px 15px;border:solid 1px #f9f9f8;border-radius:6px;box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);cursor:pointer}

#goTop:hover{height:50px;background-position:16px 16px;box-shadow:0 1px 1px rgba(0, 0, 0, 0.3)}

想看到效果就需要拖动滚动条到下面，靠右下角的位置就可以看到

$(window).scroll(function(){

var sc=$(window).scrollTop();

var rwidth=$(window).width()+$(document).scrollLeft();

var rheight=$(window).height()+$(document).scrollTop();

if(sc>0){

$("#goTop").css("display","block");

$("#goTop").css("left",(rwidth-80)+"px");

$("#goTop").css("top",(rheight-120)+"px");

}else{

$("#goTop").css("display","none");

}

});

$("#goTop").click(function(){

$('body,html').animate({scrollTop:0},300);

});

隐藏html5回到顶部,用jQuery实现的智能隐藏、滑动效果的返回顶部代码相关推荐

html锚点怎么返回顶部,滑动效果的返回顶部锚点按钮
'TOP'置顶链接,说的通俗一点就是'返回顶部的链接','go to top '一般都放在页面的底部,它可以快速返回页面顶部,以节省用户浏览页面的时间. 它主要的应用场景是当你有一个很长的网页内容时 ...
html字段隐藏,HTML5+CSS3实现超酷登录窗口(自动隐藏默认文本及判断必填字段)
内容介绍热点排行相关文章下载地址↓ 效果非常不错的登录窗口,输入框获取焦点后会自动隐藏默认文本,如果为空会提示必填字段 ,经测试,效果相当不错,感兴趣的朋友可以参考下哈在网页head区添加以下代码 ...
html5文字飞入插件,jquery使用CSS3实现文字动画效果插件Textillate.js
jquery使用CSS3实现文字动画效果插件Textillate.js Textillate是一款基于CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效果应该于网页中的任何文字 ...
Jquery实现下拉菜单滑动效果
关于下拉菜单的布局以及原始采用jquery的写法详见这篇博客:(1条消息) Jquery案例-下拉菜单_setTimeout()的博客-CSDN博客_jquery下拉菜单案例上面这篇博客的下拉菜单案 ...
html5图片轮番播放,Jquery图片轮番播放跑马灯效果
用JQuery操作DOM确实很方便,并且JQuery提供了非常人性化的API应付我们的各种需求,其中选择器在此示例-"JQuery实现图片轮播效果"上体现的尤为出色.大大简化了js ...
html5 苹果 dock,基于JQuery模仿苹果桌面的Dock效果(初级版)
新的一天新的开始,今天要分享的是用JQuery模仿苹果操作系统桌面的Dock效果,之所以称之为初级版,是因为其中还有一些bug,显示效果并不稳定.由于时间的关系,这些bug还没有修复,希望高手们不吝赐 ...
JavaScript之jQuery够用即可（each循环、位置偏移量和大小、克隆外层标签、嵌套返回顶部、集体绑定事件）
文章目录一.each循环二.位置偏移量和大小 1.offset就是标签距离视口的偏移量 2.position相对于已经定位的父标签的偏移量 3.访问尺寸 4.测试代码三.克隆外层标签四.jQu ...
js+JQuery实现返回顶部功能
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...
返回顶部的js实现(jQuery/MooTools)
一.引言在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮.例如: 如果你看到这段文字,说明转自<一棵树-博客园>,原文链接:http://www.cnb ...

隐藏html5回到顶部,用jQuery实现的智能隐藏、滑动效果的返回顶部代码

隐藏html5回到顶部,用jQuery实现的智能隐藏、滑动效果的返回顶部代码相关推荐

最新文章

热门文章