如何制作“回到顶部”的功能？

Question

最近想给Octopress增加一些新的功能，看了很多别人的博客，那些操作也基本上做了。现在想给它整得更好看些，却又不知如何去做。有好的博客和网站的话，请大家推荐一下。

Answer 1

Octopress添加二维码展示和返回顶部按钮
Octopress主题样式修改

Answer 2

(function() {
    var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body"))
        .text($backToTopTxt).attr("title", $backToTopTxt).click(function() {
            $("html, body").animate({ scrollTop: 0 },0);
    }), $backToTopFun = function() {
        var st = $(document).scrollTop(), winh = $(window).height();
        (st > 300)? $backToTopEle.show(): $backToTopEle.hide();
        //IE6下的定位
        if (!window.XMLHttpRequest) {
            $backToTopEle.css("top", st + winh-76);
        }
    };
    $(window).bind("scroll", $backToTopFun);
    $(function() { $backToTopFun(); });
})();
$(function(){
    $(".backToTop").mouseover(function(){
        $(this).addClass("backTo")
        }).mouseout(function(){
            $(this).removeClass("backTo")
            })
    })

/*backTop*/
.backToTop {
     cursor: pointer;
     opacity: .5;
     filter: Alpha(opacity=50); 
     background:url(../images/back.gif) no-repeat;display:none; 
     width:34px; 
     height:34px; 
     position: fixed; 
     _position: absolute; 
     right: 0px; 
     bottom:0px; 
     cursor: pointer; 
     text-indent:-9999px;
}
.backTo{ opacity: .9;
     filter: Alpha(opacity=100);
 }

Answer 3

直接将下面的代码另存JS，代码中的图片换成你想要的哟！

var scrolltotop={
setting:{
    startline:100, //起始行
    scrollto:0, //滚动到指定位置
    scrollduration:400, //滚动过渡时间
    fadeduration:[500,100] //淡出淡现消失
},
controlHTML:'<img src="images/topback.jpg" style="width:30px; height:30px; border:0;" />', //返回顶部按钮

controlattrs: { offsetx: (jQuery(window).width() - 1112) / 2 - 46, offsety: 93 }, //返回按钮固定位置
anchorkeyword:"#top",
state:{
    isvisible:false,
    shouldvisible:false
},scrollup:function(){
    if(!this.cssfixedsupport){
        this.$control.css({opacity:0});
    }
    var dest=isNaN(this.setting.scrollto)?this.setting.scrollto:parseInt(this.setting.scrollto);
    if(typeof dest=="string"&&jQuery("#"+dest).length==1){
        dest=jQuery("#"+dest).offset().top;
    }else{
        dest=0;
    }
    this.$body.animate({scrollTop:dest},this.setting.scrollduration);
},keepfixed:function(){
    var $window = jQuery(window);
    var controlx=$window.scrollLeft()+$window.width()-this.$control.width()-this.controlattrs.offsetx;
    var controly = $window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety;
    this.$control.css({left:controlx+"px",top:controly+"px"});
},togglecontrol:function(){
    var scrolltop=jQuery(window).scrollTop();
    if(!this.cssfixedsupport){
        this.keepfixed();
    }
    this.state.shouldvisible=(scrolltop>=this.setting.startline)?true:false;
    if(this.state.shouldvisible&&!this.state.isvisible){
        this.$control.stop().animate({opacity:1},this.setting.fadeduration[0]);
        this.state.isvisible=true;
    }else{
        if(this.state.shouldvisible==false&&this.state.isvisible){
            this.$control.stop().animate({opacity:0},this.setting.fadeduration[1]);
            this.state.isvisible=false;
        }
    }
},init:function(){
    jQuery(document).ready(function ($) {
        var mainobj=scrolltotop;
        var iebrws=document.all;
        mainobj.cssfixedsupport=!iebrws||iebrws&&document.compatMode=="CSS1Compat"&&window.XMLHttpRequest;
        mainobj.$body=(window.opera)?(document.compatMode=="CSS1Compat"?$("html"):$("body")):$("html,body");
        mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+"</div>").css({position:mainobj.cssfixedsupport?"fixed":"absolute",bottom:mainobj.controlattrs.offsety,right:mainobj.controlattrs.offsetx,opacity:0,cursor:"pointer"}).attr({title:"返回顶部"}).click(function(){mainobj.scrollup();return false;}).appendTo("body");if(document.all&&!window.XMLHttpRequest&&mainobj.$control.text()!=""){mainobj.$control.css({width:mainobj.$control.width()});}mainobj.togglecontrol();
        $('a[href="'+mainobj.anchorkeyword+'"]').click(function(){mainobj.scrollup();return false;});
        $(window).bind("scroll resize",function(e){mainobj.togglecontrol();});
    });
}};
scrolltotop.init();

Answer 4

锚点即可解决简单的回到顶部功能，JS动画可以实现过渡效果