jquery回到顶部源码分享-

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery回到顶部源码分享-相关的知识,希望对你有一定的参考价值。

// javascript Document
(function($){
    var goToTopTime;
    $.fn.goToTop=function(options){
        var opts = $.extend({},$.fn.goToTop.def,options);
        var $window=$(window);
        $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $(‘html‘) : $(‘body‘)) : $(‘html,body‘); // opera fix
        $(this).hide();
        var $this=$(this);
        clearTimeout(goToTopTime);
        goToTopTime=setTimeout(function(){
            var controlLeft;
            if ($window.width() > opts.pageHeightJg * 2 + opts.pageWidth) {
                controlLeft = ($window.width() - opts.pageWidth) / 2 + opts.pageWidth + opts.pageWidthJg;
            }else{
                controlLeft = $window.width()- opts.pageWidthJg-$this.width();
            }
            var cssfixedsupport=$.browser.msie && parseFloat($.browser.version) < 7;//判断是否ie6
            var controlTop=$window.height() - $this.height()-opts.pageHeightJg;
            controlTop=cssfixedsupport ? $window.scrollTop() + controlTop : controlTop;
            var shouldvisible=( $window.scrollTop() >= opts.startline )? true : false;
            
            if (shouldvisible){
                $this.stop().show(opts.showBtntime);
            }else{
                $this.stop().hide(opts.showBtntime);
            }
            
            $this.css({
                position: cssfixedsupport ? ‘absolute‘ : ‘fixed‘,
                top: controlTop,
                left: controlLeft
            });
        },500);
        
        $(this).click(function(event){
            $body.stop().animate( { scrollTop: $(opts.targetObg).offset().top}, opts.duration);
            $(this).blur();
            event.preventDefault();
            event.stopPropagation();
        });
    };
    
    $.fn.goToTop.def={
        pageWidth:950,//页面宽度
        pageWidthJg:10,//按钮和页面的间隔距离
        pageHeightJg:50,//按钮和页面底部的间隔距离      
        startline:20,//出现回到顶部按钮的滚动条scrollTop距离
        duration:200,//回到顶部的速度时间
        showBtntime:100,//显示\隐藏回到顶部按钮的速度时间
        targetObg:"body"//目标位置
    };
})(jQuery);
$(function(){
    $(‘<a href="#" class="go-top"><img src="themes/cyjy/images/go-top.png"  /></a>‘).appendTo("body");
});

  

注意第18行变量cssfixedsupport,该插件完美支持IE6下有不支持position:fixed的bug.

var cssfixedsupport=$.browser.msie && parseFloat($.browser.version) < 7;//判断是否ie6
var controlTop=$window.height() - $this.height()-opts.pageHeightJg;
controlTop=cssfixedsupport ? $window.scrollTop() + controlTop : controlTop;

如在IE6下就用absolute进行布局,这样在鼠标滚动时要通过$window.scrollTop()获取滚动条到顶部的垂直高度来修正controlTop参数。

通过触发鼠标单击事件回到顶部!

以上是关于jquery回到顶部源码分享-的主要内容,如果未能解决你的问题,请参考以下文章

css 回到顶部的片段

jquery点击回到页面顶部方法

简单地做一下“回到顶部”按钮,用jQuery实现其隐藏和显示

JQuery实现淡入淡出的回到顶部按钮

常用小Demo:用js/jQuery实现回到页面顶部功能

几条jQuery代码片段助力Web开发效率提升