昨日のCSSに付随して、作成してみた。

jQueryでトップへ戻るボタンを表示・非表示制御し、下端（フッターとかね）に達した時は下端の上に乗っける。

そんな感じ。

 

 

最近時間が限られていて、動作サンプル乗せられないですが、とりあえず備忘録がてら。

 

Javascript

(function($) {
/* globals ******************************/
topPagerNotRunBlowser = false;
topPagerPagetopInWait = false;
topPagerPagetopOutWait = false;
/****************************************/

$.fn.topPager = function(options){
if(window.navigator.userAgent.toLowerCase().indexOf(‘msie’) > -1
&& window.navigator.appVersion.toLowerCase().indexOf(‘msie 6.0′) > -1){
topPagerNotRunBlowser = true;
}

var topPagerOptions = {
decadeID:’#contents’,
foundationID:’#footer’,
duration:500,
easing:’linear’
};

var topPagerSetting = $.extend(topPagerOptions, options);

var obj = $(this);

if(!topPagerNotRunBlowser){
obj.css({‘display’:’none’,’opacity’:0});
}

$(window).scroll(function(){
if(!topPagerNotRunBlowser){
topPagerDecade(obj, topPagerOptions);
}
});

$(window).resize(function(tpSetting){
if(!topPagerNotRunBlowser){
topPagerPutDown(obj, topPagerOptions);
}
});

function topPagerDecade(obj, topPagerOptions){
$winTop = $(window).scrollTop();
$conTop = $(topPagerOptions.decadeID).offset().top;
if($winTop >= $conTop){
if(!topPagerPagetopInWait){
topPagerPagetopInWait = true;
obj.css({‘display’:’block’});
obj.stop(true,false).animate({‘opacity’:1.0},{
duration:topPagerOptions.duration,
easing:topPagerOptions.easing,
complete:function(){
topPagerPagetopInWait = false;
topPagerPagetopOutWait = false;
}
});
}
}else{
if(!topPagerPagetopOutWait){
topPagerPagetopOutWait = true;
obj.stop(true,false).animate({‘opacity’:0.0},{
duration:topPagerOptions.duration,
easing:topPagerOptions.easing,
complete:function(){
obj.css({‘display’:’none’});
topPagerPagetopInWait = false;
topPagerPagetopOutWait = false;
}
});
}
}
topPagerPutDown(obj, topPagerOptions);
}
function topPagerPutDown(obj, topPagerOptions){
$winTop = $(window).scrollTop();
$winFotRel = ($winTop – $(topPagerOptions.foundationID).offset().top) * -1;
$winFotAbs = $(window).height() – $(topPagerOptions.foundationID).outerHeight();
$ftOverRide = $(topPagerOptions.foundationID).outerHeight() + ($winFotAbs – $winFotRel);

if($ftOverRide >= 0){
obj.css({‘marginBottom’:$ftOverRide});
}else{
obj.css({‘marginBottom’:0});
}
}

return(this);
};
})(jQuery);

 

HTML側

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.toppager.js" type="text/javascript" charset="utf-8"></script>
<script>
$(document).ready(function(){
$(‘.pagetop’).topPager({
decadeID:’#contentsDIV’,
foundationID:’#footerDIV’
});
});
</script>

 

パラメータは通過する要素（decadeID）

下端（foundationID）

おまけでデュレーションとイージング。

 

昨日のCSSと合わせて固定幅で一応動作確認済みですが、ご利用の場合、自己責任で使ってちょ。