为了提高网站的浏览体验及友好度,相信大部分网站需要一个返回顶部的按钮,如果使用传统的a标记,再做一个div加上链接的话,非常麻烦,不仅每个页面都需要添加,而且不能实现非常智能的效果及简化维护时间。

下面,我分享一下我自己经常使用的一个返回按钮,当然,你也可以在这个基础上修改或者自己做一个。

示例:http://www.feikk.com/demo/go_top.html

建议将以下代码放在包函文件中,这样不必每个页面都添加,日后也好维护。

正文如下:

一、先调用jquery。

<!-- 这里是用来调用jquery的 -->
<script src="js/jquery.min.js" type="text/javascript"></script>
<!-- 这里是用来调用jquery的 -->

二、在页面任意位置添加如下代码。

(这里有一个样式表,和一个返回按钮所用的代码,你可以将样式表整合一下。)

<!--这里是返回顶部所需要的代码-->

<!--样式表-->
<style type="text/css">
.backToTop {
display: none;
width: 18px;
line-height: 1.2;
padding: 5px 0;
background-color: #000;
color: #fff;
font-size: 12px;
text-align: center;
position: fixed;
_position: absolute;
right: 10px;
bottom: 100px;
_bottom: "auto";
cursor: pointer;
opacity: .6;
filter: Alpha(opacity=60);
}
</style>
<!--返回顶部按钮的代码,里面有值,可以自己修改,当页面高度大于多少时显示返回top按钮。-->

<script language="javascript">;
(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>

-全文完-

By:Colin

转载请注明原文地址及作者,谢谢合作。

使用Javascript实现返回顶部功能。的更多相关文章

  1. javascript+JQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...

  2. 写一个JavaScript“返回顶部”功能

    在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮. 效果演示可以查看本页.如果页面有滚动高度,右下角就会有一个含有“返回顶部”字样的黑色背景半透明的小条条.点击这里“ ...

  3. javascript实现网页返回顶部功能

    在浏览网页时,我们一般是拖动滚动条向下滑动,浏览下面的内容,当页面超过单页时,右下角会出现一个回到顶部的图标,有些网站这个图标一直显示在右下角的. 有些网站使用锚链接来实现页面内容的跳转,但这种效果的 ...

  4. 转载:jQuery实现返回顶部功能

    转自:http://blog.csdn.net/itmyhome1990/article/details/25340705 整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图   ...

  5. js+JQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a  ...

  6. JavaScript之返回顶部

    为了弄这个Hexo,今天又是坐在电脑面前待了一天( ⊙ o ⊙ ),老是出问题,在百度上也试验了很多方法,还是没弄好,诶...身心疲惫甚是乏累啊~~~ 算了,这个Hexo先不弄,还是安分点吧,在Hex ...

  7. jQuery实现返回顶部功能

    整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图               第一种实现 一.JSP或HTML(主体结构) 在body中添加 <body id=" ...

  8. 前端 css+js实现返回顶部功能

    描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: <div> <button onclick="returnTop()" ...

  9. JavaScript/Jquery返回顶部代码

    <!DOCTYPE html> <html> <head> <title>返回顶部</title> <meta charset=&qu ...

随机推荐

  1. 数据结构算法C语言实现(十七)--- 5.1&5.2数组:定义、顺序表示及实现

    一.简述 理解数组位置的计算公式 LOC(j1, j2, ···, jn) = LOC(0, 0, ..., 0) + (b2 x ··· x bn x j1 + b3 x ··· x bn x j2 ...

  2. javamail实践

    public static void main(String[] args) throws Exception, Exception { MimeMessage message=new MimeMes ...

  3. JavaWeb---总结(十)HttpServletRequest对象(一)

    一.HttpServletRequest介绍 HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,通过这个对象 ...

  4. cobbler深入学习

    cobbler重要目录和cobbler各对象的关系 /var/www/cobbler/ks_mirror 存放操作系统镜像/var/www/cobbler/repo_mirror 存放仓库镜像/var ...

  5. redis理解

    1. Redis是什么 redis是nosql的一种. 这个问题的结果影响了我们怎么用Redis.如果你认为Redis是一个key value store, 那可能会用它来代替MySQL:如果认为它是 ...

  6. 使用MVC过滤器保存操作日志

    //定义过滤器 public class  LogAttribute : ActionFilterAttribute { /// <summary> /// 以逗号间隔 /// </ ...

  7. IIS------无法打开登录所请求的数据库 "company"。登录失败。 用户 'IIS APPPOOL\AppPool 4.0' 登录失败。

    链接: http://www.cnblogs.com/VortexPiggy/archive/2013/04/06/3002055.html

  8. 重启nginx

    在env/nginx/sbin目录下输入:nginx,即可重启

  9. 2012 Theory for Forward Rendering

    http://miss-cache.blogspot.com/2012/08/lighting-transparent-surfaces-with_26.html http://aras-p.info ...

  10. 集成ShareSDK里报错NSConcreteMutableData wbsdk_base64EncodedString]

    百度一大堆都说在这个里加个-ObjC,然后加了还是有问题 最近谷歌了下才要加入这个才正常了,国内的开发者只是一知半解的…………