您的位置:首页 > Web前端 > JQuery

一个基于jquery回到顶部的简单代码

2017-08-28 09:44 423 查看
 $(function() {

      window.top.iframeHeight();

      window.parent.iframeHeight();

      // 回到顶部插件

      function toTop() {

        var container =  $("<div id='toTop'>");

        container.css({

          'position':'fixed',

          'bottom':'30px',

          'right':'30px',

          'zIndex':'999',

          'overflow':'hidden',

        });

        container.hide()

        var img  = $("<img src='/images/toTop.png' width='50' title='回到顶部'>");

        $("body").append(container);

        container.append(img);

        $("#toTop").click(function(){

            var speed=200;//滑动的速度

            $('body,html').animate({ scrollTop: 0 }, speed);

            return false;

        })

      }

      toTop();

      $(window).scroll(function(){

        if ($(window).scrollTop()>100){

          $("#toTop").fadeIn(500);

        }else{

          $("#toTop").fadeOut(500);

        }

      })

    });
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  前端 jquery