回到顶部效果 js+css

原创 2016年08月30日 15:42:42

css和js部分:

<style type="text/css">
        body{height:5000px; }
        .top{background-color: #0a131a;color:#fff;width:50px;height:50px;display: none;
            position: fixed;right:20px;bottom:40px;}
    </style>
    <script>
    $(document).ready(function () {
        $(window).scroll(function () {
            if($(document).scrollTop()>=120){
                $(".top").fadeIn(3000);
            }else{
                $(".top").fadeOut(3000);
            }
        });
        $('.top').click(function(){
            $('html,body').animate({scrollTop: '0px'}, 2000);//缓慢回到顶部
        });
    })
    </script>

html部分:

<body >
<div>
    <a href="#" class="top">top</a>
</div>
</body>

另: jq插件 下载传送门:http://pan.baidu.com/s/1geAMIgr

使用方法—
1.引用jquery库和jquery.goup.min.js到你的页面

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.goup.min.js"></script>

在调用下插件就OK了。

<script type="text/javascript">
        $(document).ready(function () {
            $.goup({
                trigger: 100,
                bottomOffset: 150,
                locationOffset: 100,
                title: 'This is a Demo',
                titleAsText: true
            });
        });
</script>
版权声明:本文为博主原创文章,未经博主允许不得转载。

JS(JQ)实现带动画的回到顶部效果

实现功能:滚动到页面某一个高度的时候,回到顶部按钮出现。点击之后回到网页顶部,按钮隐藏。...
  • qq_16371909
  • qq_16371909
  • 2017年04月29日 14:28
  • 1576

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

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

CSS+JS 悬浮固定菜单效果

首先,先看实例,米扑代理: http://proxy.mimvp.com/price.php效果如下图,兼容chrome,firefox,windows,360,搜狗等主流浏览器米扑代理,是由百度,小...
  • sunboy_2050
  • sunboy_2050
  • 2015年08月22日 13:28
  • 9941

JS CSS 回到顶部

  • 2016年12月23日 18:06
  • 111KB
  • 下载

js实现回到顶部效果

html: //撑页面 1 2 3 4 5 6 回到顶部 //回到顶部按钮...
  • Della_UI
  • Della_UI
  • 2016年10月29日 00:07
  • 178

JS实现回到顶部效果

JS实现回到顶部效果 最近在慕课网看了一个案例教程——回到顶部效果(原生js实现)。由于这个效果比较实用,而且不难,所以看后也跟着实现了一次,效果还不错,于是做做笔记,以备不时之需! ...
  • zhongtianyue
  • zhongtianyue
  • 2017年07月27日 15:46
  • 124

原生js实现淘宝首页回到顶部效果

淘宝首页的回到顶部按钮是这样的:下拉到一定距离后按钮才显示出来,鼠标放到按钮上时,按钮背景会变成灰色,并且图标变成了文字。点击按钮缓慢回到顶部 我们先分析下实现这样的效果需要添加哪些事件。鼠标移进移...
  • tianxuezhi_s
  • tianxuezhi_s
  • 2014年02月25日 17:29
  • 1410

JS(JQ)实现带动画的回到顶部效果

实现功能:滚动到页面某一个高度的时候,回到顶部按钮出现。点击之后回到网页顶部,按钮隐藏。...
  • qq_16371909
  • qq_16371909
  • 2017年04月29日 14:28
  • 1576

源生JS实现回到顶部--缓冲效果

源生JS实现回到顶部--缓冲效果
  • m0_38099607
  • m0_38099607
  • 2017年05月24日 21:51
  • 321

js+css实现回到顶部按钮(back to top)

转自:http://www.jb51.net/article/80304.htm 修改了部分,然后直接复制粘贴即可用(放的位置你高兴就好) 需要材料:http://fontawes...
  • qq_28666081
  • qq_28666081
  • 2016年05月21日 16:08
  • 1629
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:回到顶部效果 js+css
举报原因:
原因补充:

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