利用jquery简单实现返回顶部功能

原创 2016年05月31日 14:20:50

首先大家看下效果图,

点击之后就可以回到页面顶部啦。实现很简单,主要是一段CSS和Js: 



1.CSS代码如下,为了能在你的每个页面都能有效,请把代码用在一个公共的地方,例如ftl的宏。大家酌情而定吧。



.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);

}



2.再需要一段JS就可以实现我们的功能啦,这里是用jquery写的,因为目前比较盛行,而且写起来超简便,

要是有不会的同学,建议你学习下,很easy的。不废话,直接贴代码(这里代码只支持jquery1.4以上哦)


$(function() {

    var $backToTopTxt = "返回顶部", $backToTopEle = $('

        .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(); });

})();





jQuery实现返回顶部功能

jQuery实现返回顶部功能 整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图 第一种实现 一、JSP或HTML(主体结构) 在body中添加 ...
  • itmyhome
  • itmyhome
  • 2014年05月13日 20:05
  • 4937

js实现返回顶部功能的解决方案

很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮。 首先需要在顶部添加如下html元素: 返回顶部 其中a标签指向锚点top,可以在顶部防止一个的锚点,这样在浏览器...
  • xiebaochun
  • xiebaochun
  • 2014年08月19日 06:21
  • 49547

JQuery实现一键返回顶部

本文主要实现一键返回顶部的功能,具体返回顶部的图片及样式在js文件中定义。 下面是yestop.js中的代码: /*! * YesTop(jQuery GoToTop) * version: 1.1....
  • haandxc
  • haandxc
  • 2016年03月16日 08:39
  • 507

jQuery实现返回顶部功能

整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图               第一种实现 一、JSP或HTML(主体结构) 在body中添加 ...
  • HUXU981598436
  • HUXU981598436
  • 2014年08月03日 03:03
  • 322

jQuery实现返回顶部功能

整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图              第一种实现 一、JSP或HTML(主体结构) 在body中添加 body i...
  • scholar_man
  • scholar_man
  • 2014年12月08日 17:28
  • 480

jQuery实现返回顶部功能

整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图               第一种实现 一、JSP或HTML(主体结构) 在body中添加 ...
  • wangxiaohui6687
  • wangxiaohui6687
  • 2014年05月14日 16:46
  • 429

jquery实现当页面滚动超过一屏时显示返回顶部按钮

jquery实现当页面滚动超过一屏时显示返回顶部按钮 #go_top{position:fixed; LEFT: 85%;bottom:50px;} $(document).ready(fu...
  • u013372487
  • u013372487
  • 2015年11月11日 18:17
  • 3798

jquery实现点击回到页面顶部

当页面很长的时候,使用滑动条回到顶部总是感觉很不方便,在我做项目遇到这个问题的时候,选中使用jQuery来实现。 jQuery实现回到顶部按钮效果 .upframe{height:1300px...
  • yangmingxing980
  • yangmingxing980
  • 2014年03月24日 11:58
  • 1469

bootstrap的一些API认识以及应用和回到顶部按钮的实现 week15学习

这周的很多时间是花在了bootstrap上,把慕课网的基础教学部分看完了,然后看了一下有响应式的部分以及简单看了一下回到顶部按钮是怎么实现的。 基础部分讲的都是一些API如何应用,如果可以很好地应用...
  • vancher_
  • vancher_
  • 2017年12月25日 10:10
  • 64

jquery 返回顶部和返回底部代码

特效加工厂 body { margin:0; padding:0; font-size:12px; } #main { width:910px; margin:0 auto; height:...
  • wuyanwen888
  • wuyanwen888
  • 2014年04月14日 09:25
  • 1110
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:利用jquery简单实现返回顶部功能
举报原因:
原因补充:

(最多只允许输入30个字)