打造最全的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="data: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里的汉字！

转载于:https://www.cnblogs.com/xionghui/archive/2012/05/06/2485917.html

回到顶部和返回首页jquery插件相关推荐

html5 回到顶部按钮,“返回顶部”按钮效果
"返回顶部"按钮效果 pc端: 返回顶部 .wrapper { width: 1150px; height: 3582px; border: 2px solid black; } ...
回到顶部最简单的JQuery实现代码
CSS代码,使用了fixed让对象固定于浏览器窗口: top{position:fixed;bottom:0;right:10px;} jQuery代码,注意正常使用的几个条件: $('#top'). ...
一款回到顶部的 jQuery 插件，支持 Div 中的滚动条回到顶部
前言今天在网上搜索"回到顶部"的 jQuery 插件,网上有很多,但是大部分都不支持让 Div 中的滚动条回到顶部.于是乎,不放弃,自己参考 Github 上的一个 jQuery ...
隐藏html5回到顶部,用jQuery实现的智能隐藏、滑动效果的返回顶部代码
在线DEMO:传送门 HTML代码(放在页面任意位置,并用CSS美化): 回到顶部 JS代码: $(document).ready(function() { //首先将#back-to-top隐藏 $ ...
Jquery 回到顶部
转:http://www.cnblogs.com/DemoLee/archive/2012/04/20/2459082.html 用jQuery实现渐隐渐显的返回顶部效果(附多图) 先来看几个图片效果 ...
html5 按钮回到顶部,html页面添加返回顶部按钮
html:css:.box {width: 100%;height: 100px;background: skyblue;}.box1 {width: 100% 利用 jQuery 中的 animat ...
html页面刷新回到顶部_HTMl页面中返回顶部的几种实现小结
这篇文章我们来讲一下在网站建设中,HTMl页面中返回顶部的几种实现小结.本文对大家进行网站开发设计工作或者学习都有一定帮助,下面让我们进入正文. 最近在开发网站需要制作返回顶部按钮,但是我主要为后端开 ...
php 回到顶部,jquery如何实现点击网页回到顶部效果？（图文+视频）
本篇文章主要给大家介绍如何用jquery代码实现网页回到顶部的效果. 我们在浏览各大网站页面时,想必大家肯定都遇到过,当阅览一个长页面时,拉到下面部分会出现类似回到顶部的按钮特效吧. 这种点击回到顶部 ...
html匀速回到顶部,原生js返回顶部（匀速、由快到慢）
在项目中我们经常有需求要求页面滚动到一定位置时出现返回顶部按钮,点击即返回顶部. 方法一: 锚点,这是最简单的.(a标签的href属性等于一直要到达位置元素的id值) 方法二: js直接给页面根节点设 ...

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

回到顶部和返回首页jquery插件相关推荐

最新文章

热门文章