前端 HTML 返回顶部和 底部代码实现

前端 HTML 返回顶部和 底部代码实现 本站演示

代码比较轻量, 点击返回小火箭之后, 下滑页面有时候会卡顿, 但不影响使用哦

1,html 部分

<div id='fixedLayertop'>
<div id="top" title='返回顶部'></div>
<div id="end" title='回到底部'></div>
</div>

2,CSS 部分

<!--
/* fixedLayertop */
#fixedLayertop{width: 28px;line-height: 0px;position: fixed!important;position: absolute;right: 25px;top: 50%;z-index: 102;_margin-top: 200px;_top: expression(eval(document.documentElement.scrollTop));}
#top{background: url(goto012.gif) no-repeat;width: 28px;height: 41px;}
#end{background: url(goto012.gif) no-repeat 0 -41px;width: 28px;height: 82px;}
}

3,js 部分

<script type="text/javascript" src="jquery.min.js"></script>
<script language=JavaScript>
/**
 */
jQuery(document).ready(function($){
$('#top').click(function(){
$('html,body').stop();
$('html,body').animate({
scrollTop:'0px'
},
1000);
});
$('#back').click(function(){
$('html,body').stop();
history.go(-1);
});
$('#stop').click(function(){
$('html,body').stop();
});
$('#fall').click(function(){
$('html,body').stop();
$('html,body').animate({
scrollTop:$('#footer').offset().top
},
20000);
});
$('#end').click(function(){
$('html,body').stop();
$('html,body').animate({
scrollTop:$('#footer').offset().top
},
1000);
});
$('.loop h2 a').click(function(){
$(this).text('正在载入');
});
});

jQuery.fn.ImageAutoSize = function(width) {
    $("img",this).each(function()
    {
        var image = $(this);
        if(image.width()>width)
        {
            image.width(width);
            image.height(width/image.width()*image.height());
        }
    });
}

this.tooltip = function(){	
	/* CONFIG */		
		xOffset = 10;
		yOffset = 20;		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result		
	/* END CONFIG */		
	$("a.tooltip").hover(function(e){											  
		this.t = this.title;
		this.title = "";									  
		$("body").append("<p id='tooltip'>"+ this.t +"</p>");
		$("#tooltip")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
			.fadeIn("fast");		
    },
	function(){
		this.title = this.t;		
		$("#tooltip").remove();
    });	
	$("a.tooltip").mousemove(function(e){
		$("#tooltip")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px");
	});			
};

function equalHeight(group) {
	var tallest = 0;
	group.each(function() {
		var thisHeight = $(this).height();
		if(thisHeight > tallest) {
			tallest = thisHeight;
		}
	});
	group.height(tallest);
}

jQuery(document).ready(function() {
	tooltip()});
function TsLazyload(templateUrl) {
	if(window.XMLHttpRequest){
		$(function() {
			$("img").not("#featured img").lazyload({
				placeholder: templateUrl,
				effect: "fadeIn"
			});
		});
	}
}
$(function() { $("a[rel*='external']").attr("target","_blank") });
// end jQ
</script>