前端 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>
2021-12-25 10:33:59 通过 网页 浏览(4231)
共有2条评论!
来来来测试一下
测试qq留言哦