js封装的回到顶端按钮 #javascript

back-to-top.js

/*!
 * 简单的"回到顶端"按钮，javascript封装版
 * wenhao(viko16) - v0.0.2 (2013-12-14 14:00:31+0800)
 * Released under MIT license
 * 需要先引入jquery框架
 */

$(document).ready(function() {
    //在body结束前添加按钮
	$('body').append('<a href="#" class="back-to-top">回到顶端</a>');

	//为按钮添加css样式
	$('.back-to-top').css({
		'position': 'fixed',
		'bottom': '3em',
		'right': '3em',
		'text-decoration': 'none',
		'color': '#EEEEEE',
		'background-color': 'rgba(0, 0, 0, 0.3)',
		'font-size': '12px',
		'padding': '1em',
		'display': 'none',
		'border-radius': '3px',
		'border': '1px solid #CCCCCC'
	});

	// 滚动窗口来判断按钮显示或隐藏
	$(window).scroll(function() {
		if ($(this).scrollTop() > 150) {
			$('.back-to-top').fadeIn(100);
		} else {
			$('.back-to-top').fadeOut(100);
		}
	});
	
	// jQuery实现动画滚动
	$('.back-to-top').click(function(event) {
		event.preventDefault();
		$('html, body').animate({scrollTop: 0}, 500);
	})
});

back-to-top.min.js

/*!
 * 简单的"回到顶端"按钮，javascript封装版
 * wenhao(viko16) - v0.0.2 (2013-12-14 14:00:31+0800)
 * Released under MIT license
 * 需要先引入jquery框架
 */

$(document).ready(function(){$('body').append('<a href="#" class="back-to-top">回到顶端</a>');$('.back-to-top').css({'position':'fixed','bottom':'3em','right':'3em','text-decoration':'none','color':'#EEEEEE','background-color':'#49AFCD','font-size':'12px','padding':'1em','display':'none','border-radius':'3px','border':'1px solid #CCCCCC'});$(window).scroll(function(){if($(this).scrollTop()>150){$('.back-to-top').fadeIn(100)}else{$('.back-to-top').fadeOut(100)}});$('.back-to-top').click(function(event){event.preventDefault();$('html, body').animate({scrollTop:0},500)})});

back-to-top.mobile.js

// 手机适应版本

// 滚动窗口来判断按钮显示或隐藏
        $(window).scroll(function () {
            if ($(this).scrollTop() > 150) {
                $('#back-to-top').show();
            } else {
                $('#back-to-top').hide();
            }
        });
        $('#back-to-top').click(function (event) {
            event.preventDefault();
            $('body').scrollTop(0);
        })