jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]

jQuery脚本:

 <script type="text/javascript">
     $(function() {
       var scrollDiv = document.createElement('div');
       $(scrollDiv).attr('id', 'toTop').html('^ 返回顶部').appendTo('body');
       $(window).scroll(function() {
         if ($(this).scrollTop() != 0) {
           $('#toTop').fadeIn();
         } else {
           $('#toTop').fadeOut();
         }
       });
       $('#toTop').click(function() {
         $('body,html').animate({ scrollTop: 0 }, 800);
       })
     });
   </script>

CSS样式:

<style type="text/css">
     #toTop
 {
       width: 100px;
       z-index: 10;
       border: 1px solid #333;
       background: #121212;
       text-align: center;
      padding: 5px;
      position: fixed;
       bottom: 0px;
       right: 0px;
       cursor: pointer;
      display: none;
      color: #fff;
       text-transform: lowercase;
       font-size: 0.9em;
 }
  </style>

带有iframe框架的滚动操作:

<script type="text/javascript">
 <!--
     $().ready(function() {
       $('<div id="return_old_tips" class="btn_return_old" style="position:' + ($.browser.msie ? "absolute" : "fixed") + ';" onclick="return_old({$feedback_flag},\'{$current_url}\')">返回旧版</div>').appendTo($("body"));
       if ($.browser.msie) {
        $("#return_old_tips").css("top", 200);
      }
      if ($.browser.msie) {
        top.document.body.onscroll = function() {
          var f = 200 + (top.document.documentElement.scrollTop || top.document.body.scrollTop);
          if (f > parseInt($("body").height(), 10)) {
            f = parseInt($("body").height(), 10);
          }
           $("#return_old_tips").css({
            top: f,
            left: 0
           });
        }
         top.document.body.onresize = top.document.body.onscroll;
      } else {
        $(window.parent.document).scroll(function() {
           var f = 200 + (top.document.documentElement.scrollTop || top.document.body.scrollTop);
          if (f > parseInt($("body").height(), 10)) {
            f = parseInt($("body").height(), 10);
          }
          $("#return_old_tips").css({
            top: f,
             left: 0
           });
        }).resize(function() {
           var f = 200 + (top.document.documentElement.scrollTop || top.document.body.scrollTop);
           if (f > parseInt($("body").height(), 10)) {
            f = parseInt($("body").height(), 10);
          }
          $("#return_old_tips").css({
            top: f,
             left: 0
           });
         });
       }
     });
 //-->
   </script>

以上所述是小编给大家介绍的jQuery实现返回顶部按钮和scroll滚动功能[带动画效果],希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • 浅谈jQuery页面的滚动位置scrollTop、scrollLeft

    Web页面常常比显示该页面的浏览器窗口还要大,因为Web文档具有很多内容,往往会导致页面比浏览器还要高,有时候甚至还要宽,这迫使访问者通过滚动来查看整个页面(如图10-8所示).当访问者滚动页面的时候,一部分文档会从视线中消失.例如,Web页面不能完全放入浏览器窗口中,文档会向左或向上滚动,因此,页面的顶部和左边都会消失在视野之内.这意味着浏览器窗口的左上角和文档的左上角并不相同.如果试图放置一个新元素,例如,屏幕顶部的一个动态Banner:而如果只是试图将元素的left和top位置设置为0,将

  • jQuery中ScrollTo用法示例

    本文实例讲述了jQuery中ScrollTo用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <h

  • jQuery iScroll.js 移动端滚动条美化插件第1/5页

    官网:http://cubiq.org/iscroll-5 demo: 滚动刷新:http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/ 'Carousel' demo iScroll功能很强大,目前我只用来 自定义滚动条 以下简单介绍一下iscrol在移动端自定义滚动条时的使用和注意事项. 一.用法 iScroll对要滚动的元素进行初始化,且不限制一个页面中使用iScroll的元素个数. 使用iScroll时,DOM树的结构要足够

  • jQuery Mobile开发中日期插件Mobiscroll使用说明

    近期在移动方面的开发,使用jQuery Mobile ,移动方面的插件不如Web 方面的插件多,选择的更少,有一些需要自己去封装,但功力尚不足啊. 日期插件JQM也提供了内置的,但样式方面不好看,只好百度.Google啦,找到了两款 jquery-mobile-datebox 和 mobiscroll-2.3 jqueryMobileDatebox 这个在板上的表现不好,性能方面有点卡 mobiscroll 性能方面比前者要好一些,效果更简洁 ,划动更流畅 放在一起对比下 各位看官,你们觉得哪个

  • 学习使用jquery iScroll.js移动端滚动条插件

    大家在日常工作中最常用的插件是什么,jQurey?Lazyload?但是这些都是在PC端,但是在移动端最常用的插件莫过于iScroll了,iScroll到底是什么东西,应该怎么用?iScroll是个很强大的插件,我也只是略懂皮毛,这里我们简单的介绍一下. iScroll的产生: iScroll的产生完全是因为移动版webkit浏览器,例如在iPhone,Android 的移动设备上. iScroll的使用方法: iScroll的原理是外层有一个溢出隐藏(overflow:hidden;)的DOM

  • jQuery插件windowScroll实现单屏滚动特效

    回首望,曾经洋洋得意的代码现在不忍直视.曾经看起来碉堡的效果现在也能稍微弄点出来.社会在往前发展,人也不得不向前走. 参考于搜狗浏览器4.2版本首页的上下滚动效果.主要实现整个窗口的上下和左右滚动逻辑,还有很多可以拓展的空间.希望大家能多提意见与建议. 代码如下: HTML <!doctype html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-

  • jQuery中Nicescroll滚动条插件的用法

    本篇文章主要介绍了jQuery中Nicescroll滚动条插件的用法,Nicescroll滚动条插件是一个非常强大的基于jQuery的滚动条插件,有需要的可以了解下. Nicescroll滚动条插件是一个非常强大的基于jQuery的滚动条插件,不需要增加额外的css,几乎全浏览器兼容.ie6+,实现只需要一段代码,侵入性非常小,样式可完全自定义,支持触摸事件,可在触摸屏上使用. Nicescroll官网地址:http://www.areaaperta.com/nicescroll/ 引入核心文件

  • jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]

    jQuery脚本: <script type="text/javascript"> $(function() { var scrollDiv = document.createElement('div'); $(scrollDiv).attr('id', 'toTop').html('^ 返回顶部').appendTo('body'); $(window).scroll(function() { if ($(this).scrollTop() != 0) { $('#toT

  • 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

  • vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法

    这里是本小白使用时遇到的问题及个人使用的方法可能并不完美. 1.监测浏览器滚动条滚动事件及滚动距离 dmounted() { window.addEventListener("scroll", this.gundong); }, destroyed() { window.removeEventListener("scroll", this.gundong); }, methods: { gundong() { var dis = document.documentE

  • 基于Javascript实现返回顶部按钮

    一个网页内容一多, 就会分屏显示数据, 如果屏目很多, 用户访问的数据已经到了页面的底部, 这时候返回到顶部也是需要一点时间. 这样对用户体验来说, 可能就稍微逊了一点. 所以页面数据多的网页, 现在都会用一个"返回顶部"按钮来快速跳转到网页的顶部. 那现在我们就来实现这么一个功能. 这个页面我们就不写什么数据, 直接就加入一个a标签来作为返回顶部的按钮, 并给他一个class名称:top. <a href="#" class="top"&

  • Vue实现返回顶部按钮实例代码

    前言 本文主要介绍了Vue 实现返回顶部按钮的方法,下面话不多说,来直接看代码吧 实例代码: <template> <div class="scrollTop"> <div class="backTop" @click="backTop"> <button v-show="flag_scroll"> 返回顶部 </button> </div> //数据源

  • JavaScript实现返回顶部按钮

    本文实例为大家分享了JavaScript实现返回顶部按钮的具体代码,供大家参考,具体内容如下 1.先搭架子 a { text-decoration: none; } body { height: 5000px; } .backtotop { position: fixed; bottom: 80px; right: 80px; width: 80px; height: 80px; background-color: #ccc; font-size: 20px; text-align: cente

  • JavaScript实现返回顶部按钮案例

    本文实例为大家分享了JavaScript实现返回顶部按钮的具体代码,供大家参考,具体内容如下 思路: 首先先设计出其静态样式,这里主要利用固定定位,将其固定在页面底部的某一位置处 .backtotop { position: fixed; bottom: 80px; right: 80px; width: 80px; height: 80px; background-color: #ccc; font-size: 20px; text-align: center; padding-top: 12

  • javascript简单实现跟随滚动条漂浮的返回顶部按钮效果

    本文实例讲述了javascript简单实现跟随滚动条漂浮的返回顶部按钮效果.分享给大家供大家参考,具体如下: 比较优秀的一款超过一屏高度才显示的,跟随滚动条漂浮的返回顶部按钮特效代码. 运行效果如下图所示: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo

  • javascript中返回顶部按钮的实现

    炫酷的返回顶部功能 js核心代码 window.onscroll = function(){ var t = document.documentElement.scrollTop || document.body.scrollTop; var top_div = document.getElementById( "go" ); if( t >= 300 ) { top_div.style.display = "block"; } else { top_div.

  • 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

随机推荐