jquery返回顶部自动隐藏按钮代码

现在开始我们准备css代码

 代码如下 复制代码

#toTop {
width:50px;
height:50px;
background:#fff url(image.png);//这个图片为你点击返回图标效果
position:fixed;
left: 50%;
margin-left: 510px;
bottom:50px;
cursor:pointer;
display:none;
}

现在在你的页面低部加入

 代码如下 复制代码

<div id="toTop"></div>
<script type="text/javascript">
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});

$('#toTop').click(function() {
$('body,html').animate({scrollTop:0},500);
});
});
</script>

友情提示：注意上面我们没把jquery库文件引入进来，大家需要下载一个jquery文件哦，这里我就不介绍了。

时间： 2024-10-22 09:12:10

jquery返回顶部自动隐藏按钮代码的相关文章

jquery 返回顶部浮动图标实现代码

代码使用很简单,只需要将HTML代码,和jQuery代码放入到网页的尾部即可.另外你可能还需要和我一样盗用人人网的返回顶部图片一张. HTML代码 <div style="display:none;" class="back-to" id="toolBackTop"> <a title="返回顶部" onclick="window.scrollTo(0,0);return false;"

基于jquery 返回顶部按钮效果代码

在 IE6 中, 因为不支持浏览器跟随功能, 所以通过跟随页面滚动来虚拟跟随效果, 在滚动页面的时候隐藏回到顶部按钮, 滚动停止时再显示按钮. 参数描述 pageWidth: 页面宽度 (正整数), 如图中 A 所示. nodeId: 回到顶部按钮的 ID (字符串). nodeWidth: 回到顶部按钮的宽度 (正整数), 如图中 B 所示. distanceToBottom: 回到顶部按钮到页面底部的距离 (正整数), 如图中 C 所示. hideRegionHeight: 不显示回到顶部按

收藏了三jQuery返回顶部特效代码

 代码如下 复制代码 <title>jQuery返回顶部特效 </title> </head> <body> <style type="text/css"> /*返回顶部*/ #roll_top {position:relative; margin-bottom:1px;cursor:pointer;height:60px;width:60px;display:block;background:#ddd;} #roll_top

jquery返回顶部实现方法

本文章主要讲关于jquery返回顶部实现方法,下面看代码吧. html  代码如下: <div class="scroll"></div> <script type="text/网页特效" src="../skins/css教程/jquery.js" charset="utf-8"></script> <script type="text/javascript&q

jquery 返回顶部、图片比例缩小、验证元素是否存在

jquery 返回顶部.图片比例缩小.验证元素是否存在 返回顶部代码 $(document).ready(function() {   $('a[href*=#]').click(function() {    if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'')        && location.hostname == this.hostname) {      var $target = $

jquery返回顶部代码

分享一个jquery在返回顶部在代码:不依赖CSS $("body").append(" ∧   ");   var totop=$("#toTop"); totop.bind({ click:function(){ $("html,body").animate({scrollTop:0},500) }, mouseover:function(){ $("#toTopTips").stop(false,tr

网页教程:页面返回顶部锚点按钮的设计

对于版面较长的网页,在底部会放上返回顶部的锚点链接,做法也很简单,直接用HTML就能实现,不过这种效果不交呆板,原因就是向上移动很突然,经常会让用户产生莫名的感觉,本文结合JS将实现一种滑动返回顶部的网页效果,这样用户感觉会比较舒服. 'TOP'置顶链接,说的通俗一点就是'返回顶部的链接','go to top '一般都放在页面的底部,它可以快速返回页面顶部,以节省用户浏览页面的时间. 它主要的应用场景是当你有一个很长的网页内容时,您通常要 把 'TOP'锚点链接 添加在页面底部,只要用户一点击

js+JQuery返回顶部功能如何实现_jquery

很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p>其中a标签指向锚点top,可以在顶部防止一个<a name="top"></a>的锚点,这样在浏览器不支持js时也可以

javascript返回顶部效果(自写代码)_javascript技巧

现在很多网站都用到了返回顶部的效果,当然懒的话也可以直接 a 链接链到 #,这样也可以达到效果.今天抽空用原生 javascript 写了个,由于本人水平有限,如有问题请指出. html 代码: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js-回到顶部</title> &