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);" class="go-top">返回顶部</a>').appendTo('body').goToTop(options);
});
//tongji
</script>

js代码

 代码如下 复制代码

$.fn.extend({
    goToTop: function (b) {
        var b = $.extend({
            pageWidth: 940,
            pageWGap: 10,
            pageHGap: 30,
            startline: 20,
            duration: 200,
            showBtntime: 100
        }, b);
        var e = $(this);
        var f = $(window);
        var d = (window.opera) ? (document.compatMode == "CSS1Compat" ? $("html") : $("body")) : $("html,body");
        var c = !($.browser.msie && parseFloat($.browser.version) < 7);
        var a = false;
        e.css({
            opacity: 0,
            position: (c ? "fixed" : "absolute")
        });
        e.click(function (g) {
            d.stop().animate({
                scrollTop: 0
            }, b.duration);
            e.blur();
            g.preventDefault();
            g.stopPropagation()
        });
        f.bind("scroll resize", function (i) {
            var h;
            if (f.width() > b.pageHGap * 2 + b.pageWidth) {
                h = (f.width() - b.pageWidth) / 2 + b.pageWidth + b.pageWGap
            } else {
                h = f.width() - b.pageWGap - e.width()
            }
            var j = f.height() - e.height() - b.pageHGap;
            j = c ? j : f.scrollTop() + j;
            e.css({
                left: h + "px",
                top: j + "px"
            });
            var g = (f.scrollTop() >= b.startline) ? true : false;
            if (g && !a) {
                e.stop().animate({
                    opacity: 1
                }, b.showBtntime);
                a = true
            } else {
                if (a && !g) {
                    e.stop().animate({
                        opacity: 0
                    }, b.showBtntime);
                    a = false
                }
            }
        })
    }
});
时间： 2024-10-12 19:43:51

jQuery固定DIV实现返回顶部效果代码的相关文章

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 To

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 返回顶部效果代码

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

收藏了三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/js版效果代码

js返回顶部 html 代码:  代码如下 复制代码 <!DOCTYPE HTML> <html lang="en-US"> <head>     <meta charset="UTF-8">     <title>js-回到顶部</title>     <style type="text/css">     *{margin:0;padding:0;}    

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

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: