回到顶部和返回首页jquery插件

最新推荐文章于 2020-08-16 16:50:22 发布

weixin_33725272

最新推荐文章于 2020-08-16 16:50:22 发布

阅读量129

点赞数

文章标签： javascript ViewUI

打造最全的CMS类教程聚合！

第一种方法：在网页<body></body>之间插入：

<div id="full" style="width:50px; height:95px; position:fixed; left:50%; top:425px; margin-left:493px; z-index:100; text-align:center; cursor:pointer;"><a><img src="images/up.png" border=0 alt="返回顶部"></a></div>
<script src="/js/gotop.js" type="text/javascript"></script>

修改图片路径和js路径，保证图片和JS都能打开就行了！

JS文件下载：点击下载

第二种方法：回到顶部功能：在网页<body></body>之间插入：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
(function() {
var $backToTopTxt = "回顶部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body"))
.text($backToTopTxt).attr("title", $backToTopTxt).click(function() {
$("html, body").animate({ scrollTop: 0 }, 120);
}), $backToTopFun = function() {
var st = $(document).scrollTop(), winh = $(window).height();
(st > 0)? $backToTopEle.show(): $backToTopEle.hide();
//IE6下的定位
if (!window.XMLHttpRequest) {
$backToTopEle.css("top", st + winh - 166);
}
};
$(window).bind("scroll", $backToTopFun);
$(function() { $backToTopFun(); });
})();
</script>

返回首页功能：

原理就是在基于上段代码中的.click(function() {$("html, body").animate({ scrollTop: 0 }, 120);})点击事件中加入转向链接！具体代码如下：

<script>
(function() {
var $backToTopind = "回首页", $backToTopEle = $('<div class="backToTop1"></div>').appendTo($("body"))
.text($backToTopind).attr("title", $backToTopind).click(function() {location.href='http://www.meowpet.com';
}), $backToTopFun = function() {
var st = $(document).scrollTop(), winh = $(window).height();
(st > 0)? $backToTopEle.show(): $backToTopEle.hide();
//IE6下的定位
if (!window.XMLHttpRequest) {
$backToTopEle.css("top", st + winh);
}
};
$(window).bind("scroll", $backToTopFun);
$(function() { $backToTopFun(); });
})();
</script>

第三种方法：

<script type="text/javascript">
var w = 240;
var h = 59;
var str = "";
var obj = document.getElementById("divStayTopLeft");
if (obj)str = obj.innerHTML;
if( typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat'){
document.writeln('<DIV style="z-index:9;right:0;bottom:0;height:'+h+'px;width:'+w+'px;overflow:hidden;POSITION:fixed;_position:absolute; _margin-top:expression(document.documentElement.clientHeight-this.style.pixelHeight+document.documentElement.scrollTop);">');
}
else {
document.writeln('<DIV style="z-index:9;right:0;bottom:0;height:'+h+'px;width:'+w+'px;overflow:hidden;POSITION:fixed;*position:absolute; *top:expression(eval(document.body.scrollTop)+eval(document.body.clientHeight)-this.style.pixelHeight);">');
}
document.writeln('<div style="clear:both;margin:auto;height:40px;font-size:14px;overflow:hidden;font-weight:bold;text-align:left;"><a href="javascript:scroll(0,0)" hidefocus="true"><img src="http://images.cnblogs.com/top.gif" alt="回到顶部" style="border: 0px;" /></a><a href="http://www.meowpet.com/" hidefocus="true"><img src="http://images.cnblogs.com/hsyg.gif" alt="返回首页" style="border: 0px;" /></a></div> ');
document.write('<div style="clear:both;margin:auto;overflow:hidden;text-align:left;">'+str+'</div>');
document.writeln('</DIV>');
</script>

里边有2张图片，可自行替换，这里就不提供了，找不到图片路径的话会显示成alt里的汉字！

weixin_33725272

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
回到顶部和返回首页jquery插件

打造最全的CMS类教程聚合！第一种方法：在网页&lt;body&gt;&lt;/body&gt;之间插入：&lt;!--返回顶部开始--&gt; &lt;div id="full" style="width:50px; height:95px; position:fixed; left:50%; top:425px; margin-left:493px; z-index:10...
复制链接

扫一扫

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。