jquery实现返回顶部效果代码

jquery中返回顶部核心代码就是

 代码如下 复制代码

// Back To Top
$(document).ready(function(){
  $('.top').click(function() { 
     $(document).scrollTo(0,500); 
  });
});

//Create a link defined with the class .top
<a href="#" class="top">Back To Top</a>

下面我们看一个返回顶部实例

1、样式设置：

 代码如下 复制代码

#toTop {
       /*选中的背景图片的大小*/
    width: 54px;
    height: 54px;
    display: none;/*刚开始不显示*/
    position: fixed;
    right: 25px;/*距离右边大小值*/
    bottom: 45px;/*距离底部大小值*/
       /*选定图片区域*/
    background-image: url(images/qqbg_1.5.5.png);
    background-repeat: no-repeat;
    background-position: -700px -110px;
    opacity: 0.3; /*透明度*/
}

#toTop:hover {
    opacity: 1;/*悬停时不透明*/
    filter: alpha(opacity = 100);
}

2、JS代码：

 代码如下 复制代码

<a href="#" target="_self" id="toTop" title="返回顶部" onclick="window.scrollTo(0,0);return false"></a>
<script type = "text/javascript">
    function toTopHide(){
        $(document).scrollTop()>400?
                $("#toTop").show()
                    :$("#toTop").hide();
    }
    $(window).scroll(function(){toTopHide()});

主要的代码是：window.scrollTo(0,0);
</script>
时间： 2024-08-13 17:27:03

jquery实现返回顶部效果代码的相关文章

jQuery实现返回顶部效果的方法

  本文实例讲述了jQuery实现返回顶部效果的方法.分享给大家供大家参考.具体实现方法如下: 1.首先是CSS样式: ? 1 2 3 4 5 6 7 /*updown*/ #shangxia{position:fixed;top:83%;right:42%;margin-right:-543px;display:block;_display:none} #shang,#comt,#xia{background:url(../images/sprite.png) no-repeat;positi

jQuery实现返回顶部效果的方法_jquery

本文实例讲述了jQuery实现返回顶部效果的方法.分享给大家供大家参考.具体实现方法如下: 1.首先是CSS样式: /*updown*/ #shangxia{position:fixed;top:83%;right:42%;margin-right:-543px;display:block;_display:none} #shang,#comt,#xia{background:url(../images/sprite.png) no-repeat;position:relative;cursor

基于jQuery实现返回顶部实例代码_jquery

效果图展示如下所示: 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: 引用代码: <script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="http:

jQuery实现返回顶部效果五种方法

这里我介绍五种利用jQuery实现返回顶部效果 方法1.好处:回顶部按钮紧贴网页外层DIV边框:缺点:滚动时不够平滑.  代码如下 复制代码 <!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.o

WordPress增加返回顶部效果代码

第一步 在下面主题文件footer.php底下加上这段代码:  代码如下 复制代码  <script src="top.js" type="text/javascript" charset="utf-8"></script > <div id="scroll"><a href="javascript:void(0)" onclick="goto_top()

jQuery固定DIV实现返回顶部效果代码

效果代码如下   htm代码(这一段最好放在html中最下面)  代码如下 复制代码 <script type="text/javascript"> $(function(){ //gotop var options = {pageWidth:960,pageWGap:1,pageHGap:30,startline:100,duration:200,showBtntime:100} $('<a href="javascript:void(0);"

jquery 返回顶部效果代码

预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了:当然,在实际使用中,不会出现这样的问题.

基于jquery的返回顶部效果（兼容IE6）_jquery

最近也在学jquery,就顺便记录一下了. HTML 复制代码 代码如下: <div class="scroll"></div> <script type="text/javascript" src="../skins/css/jQuery.js" charset="UTF-8"></script> <script type="text/javascript&qu

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

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