jQuery实现返回顶部功能

代码很简单,这里就不多废话了,小伙伴们看代码吧。

HTML:

    <!--Go to Top-->
    <div id="Fixed">
      <a id="goTop" class="fl" title="去顶部" href="javascript:;">去顶部</a>
    </div>
    <!--Go to Top end-->

CSS:

  .fl{
    display:block;
    float:left;
    width:50px;
    height:50px;
    text-align:center;
    background-color:#eaeaea;
    background-image:url(../images/toTop.png);
  }
  .fl:hover{background-color:#f48942;background-image:url(../images/toTop.png);}

  #Fixed {
    position: fixed;
    _position: absolute;
    z-index: 100;
    bottom: 70px;
    left: 50%;
    margin-left: 530px;
    _bottom: auto;_top:
    expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-70);
    width: 50px;
    text-indent: -40000px;
    background: #fff
  }

  /*置顶 end*/

Js:

  /*置顶功能*/
  $(function(){
  $(window).bind('scroll', {
    fixedOffsetBottom: parseInt($('#Fixed').css('bottom'))
  },
  function(e) {
    var scrollTop = $(window).scrollTop();
    var referFooter =$('#footer');
    scrollTop > 100 ? $('#goTop').show() : $('#goTop').hide();
    if (!/msie 6/i.test(navigator.userAgent)) {
      if ($(window).height() - (referFooter.offset().top - $(window).scrollTop()) > e.data.fixedOffsetBottom) {
        $('#Fixed').css('bottom', $(window).height() - (referFooter.offset().top - $(window).scrollTop()))
      } else {
        $('#Fixed').css('bottom', e.data.fixedOffsetBottom)
      }
    }
  });

  $('#goTop').click(function() {
    $('body,html').stop().animate({
      'scrollTop': 0,
      'duration': 100,
      'easing': 'ease-in'
    })
  });
  });
  /*置顶功能 end*/
时间: 2016-02-21

jQuery实现返回顶部功能适合不支持js的浏览器

很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a href="#top" rel="external nofollow" ><span></span>返回顶部</a></p> 其中a标签指向锚点top,可以在顶部防止一个<a name="top&qu

jQuery实现返回顶部效果的方法

本文实例讲述了jQuery实现返回顶部效果的方法.分享给大家供大家参考.具体实现方法如下: 1.首先是CSS样式: /*updown*/ #shangxia{position:fixed;top:83%;right:42%;margin-right:-543px;display:block;_display:none} #shang,#comt,#xia{background:url(../images/sprite.png) no-repeat;position:relative;cursor

使用jQuery实现返回顶部

使用jQuery实现.所用图片: 1.尝试滚动 此页面到底部即可出现go2top按钮. 2.go2top-inner暂未使用. HTML&JS定义: 复制代码 代码如下: <a id="go2top" class="go2top" href="#header"><span class="go2top-inner"></span></a> <script type=&

一句jQuery代码实现返回顶部效果(简单实用)

使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: 引用代码: <script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="http://hovertree

jquery实现页面常用的返回顶部效果

本文实例为大家分享了jquery实现返回顶部效果的全部代码,供大家参考,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>返回顶部</title> <style type="text/css"> *{ margin: 0; padding:

用jQuery实现的智能隐藏、滑动效果的返回顶部代码

在线DEMO:传送门 HTML代码(放在页面任意位置,并用CSS美化): 复制代码 代码如下: <p id="back-to-top"><a href="#top"><span></span>回到顶部</a></p> JS代码: <script type="text/javascript" src="js/jquery-1.7.2.min.js"&g

jquery小火箭返回顶部代码分享

这是一款基于jquery小火箭返回顶部特效源码,解决了页面太长造成的用户返回页面顶端困难. 为大家分享的jquery小火箭返回顶部代码如下 <head> <title>jquery小火箭返回顶部代码</title> <link href="css/top.css" rel="stylesheet" type="text/css"/> </head> <body style=&quo

jquery 实现返回顶部功能

今天搞了一个回到顶部的JS JQ功能,废话不多说,有图有真相! 复制代码 代码如下: (function($){       $.fn.survey=function(options){  var defaults={width:"298",height:"207"};  var options=$.extend(defaults,options);      if($.browser.msie){      var ieVersion=parseInt($.bro

基于jQuery实现返回顶部实例代码

效果图展示如下所示: 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: 引用代码: <script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="http:

jQuery实现的个性化返回底部与返回顶部特效代码

本文实例讲述了jQuery实现的个性化返回底部与返回顶部特效代码.分享给大家供大家参考,具体如下: 运用了所学习的jQuery特性,制作了这款效果,该效果集结了返回底部.返回顶部.网站留言导航三种功能,网站留言的链接你可以修改为任意一个您想导航的链接,这个可以灵活运用了.本款效果的亮点在于兼容性和动画效果,以及设计美观的箭头等. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-back-top-buttom-style-codes/

jquery实现的动态回到顶部特效代码

本文实例讲述了jquery实现的动态回到顶部特效代码.分享给大家供大家参考,具体如下: 这款jquery动态回到顶部特效,不是一下子就回到了网页顶部,而是带点缓冲的效果,有动画效果,使用了jQuery插件,这是个非常常用的网页特效,希望大家喜欢哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-back-top-dh-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DT

jQuery带进度条全屏图片轮播特效代码分享

本文实例讲述了jQuery带进度条全屏图片轮播特效.分享给大家供大家参考.具体如下: jQuery实现的带进度条转接全屏图片轮播效果是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效代码,实现效果大气,简洁大方 运行效果图:                  -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. (1)在head区域引入CSS样式: link rel="sty

jquery带有索引按钮且自动轮播切换特效代码分享

本文实例讲述了jquery带有索引按钮且自动轮播切换特效.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的带有索引按钮且自动轮播切换特效代码,实现过程很简单. 运行效果图:                              -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link rel="stylesheet" hr

JS仿万科底部的新闻滑动特效代码

废话不多说了,直接给大家贴代码了,具体代码如下所述: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿万科的底部的新闻滑动特效</title> <style> * { padding: 0; margin: 0; } #subject { position: relative; width:

jQuery实现自动与手动切换的滚动新闻特效代码分享

本文实例讲述了jQuery实现滚动新闻特效.分享给大家供大家参考.具体如下: jQuery实现滚动新闻代码是一款基于bootstrup 3实现的响应式jQuery滚动新闻插件.有三种展示新闻的方式,自动向下循环展示,自动向上循环展示以及手动循环展示,总有一款适合你的. 运行效果图:                                -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式.

jquery地址栏链接与a标签链接匹配之特效代码总结

如题所述,当出现这样的功能,点击某个链接后,给跳转后的该链接地址添加样式,通过添加class为current来增加特殊样式. 如图所示:点击HTML+css3跳转后,给其添加如图样式: js代码如下: var currUrl = window.location.href; var currStyle = function (links){ links.each(function(){ var url = $(this).attr('href'); if (currUrl.indexOf(url)

基于jquery实现的仿优酷图片轮播特效代码

本文为大家分享了一种常见的并且比较复杂的轮播效果,就是优酷主界面的轮播图,效果图如下: 我们在书写代码之前,先分析效果图的结构: 1. 左右两个方向按钮,可以用来切换上一张与下一张. 2. 下方有分页指示器,用来标注滚动到了第几张,当然,你点击对应的按钮,也可以跳转到对应的图片. 3. 中间主要显示区域就是用来摆放需要轮播的图片. 根据上面描述,我们首先可以书写HTML代码. 一.HTML代码 <body> <div id="youku"> <div cl

jQuery鼠标经过方形图片切换成圆边效果代码分享

这是一款基于jQuery鼠标经过方形图片切换成圆边特效代码,点击图片会弹出浮层,用户还可以自定义对应图片的标题与文字说明,适合图片页面的展示,是一款非常实用的图片特效源码. 运行效果图: --------------------------------效果演示 源码下载---------------------------------- 鼠标经过方形图片切换成圆边效果 点击图片会弹出浮层 为大家分享的jQuery鼠标经过方形图片切换成圆边效果代码如下 <head> <title>j

jQuery实现的产品自动360度旋转展示特效源码分享

这是一款基于jQuery实现的产品自动360度旋转展示特效代码,可以对产品进行360度旋转展示,更好的让顾客了解产品的全部外观细节. jQuery产品360度旋转展示代码,支持预加载,能够快速全面的的预览产品的图片,主要原理是利用多张图片按顺序播放实现,本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码. 运行效果图:---------------------------------效果查看 源码下载----------------------------------- 为大家分享的