文档章节

简单的点击返回顶部

史文帝
 史文帝
发布于 2016/11/29 22:18
字数 427
阅读 10
收藏 0

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery可变透明度返回顶部特效 </title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>

body {
  font-size: 100%;
  color: #f5f4ed;
  background-color: #795d6b;
}

a {
  color: #e86256;
  text-decoration: none;
}

.cd-container {
  width: 100%;
  height:3000px;
}
.cd-container::after {
  content: '';
  display: table;
  clear: both;
}
header {
  background: #5c4751;
  height: 100px;
  text-align: center;
}

header p {

  font-size: 0.8125rem;
  color: #957484;
}
main p {
  font-size: 1rem;
  line-height: 2;
}

.cd-top {
    height: 40px;
    display: block;
    width: 40px;
    position: fixed;
    bottom: 40px;
    right: 10px;
    color: #FFFFFF;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    text-align: center;
    background: crimson;
    overflow: hidden;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.3s;  
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.cd-top.cd-is-visible {
  /* 按钮变得可见*/
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* 如果用户继续向下滚动,这个按钮的透明度会变得更低 */
  opacity: .5;
}
.no-touch .cd-top:hover {
  background-color: #e86256;
  opacity: 1;
}
#_height{
     position: fixed;
         text-align: center;
      height: 80px;
      width: 80px;
        bottom: 40px;
    left: 10px;
    background: #FFFFFF;
    color: #000;
}
</style>
</head>
<body>
    
<header>
    <h1>jQuery可变透明度返回顶部代码</h1>
    <p>向下拉动滚动条查看效果,超过1200像素,注意按钮的透明度</p>
</header>
<main class="cd-container">
</main>
<a href="#0" class="cd-top">Top</a>
<div id="_height"></div>
</body>
</html>
<script>
    jQuery(document).ready(function($){
    // 浏览器窗口滚动(像素)后,“回到顶部”链接显示
    var offset = 500,
        //浏览器窗口滚动(像素)后,“回顶”链接的不透明度降低
        offset_opacity = 1200,
        //顶部滚动动画的持续时间(在毫秒)
        scroll_top_duration = 700,
        //“回到顶部”的链接
        $back_to_top = $('.cd-top');

    //隐藏或显示“回顶”链接
    $(window).scroll(function(){
                    var _height=$(this).scrollTop();
            $("#_height").html("当前滚动高度"+_height);
        ( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
        //这是三元操作符:当前的滚动条的位置 大于offset吗 ? 如果大于就添加cd-is-visible类名,负责删除cd-is-visible cd-fade-out 类名
        if( $(this).scrollTop() > offset_opacity ) { 
            $back_to_top.addClass('cd-fade-out');
        }
    });
 
    //平滑滚动到顶部
    $back_to_top.on('click', function(event){
        event.preventDefault();  //取消默认事件
        $('body,html').animate({
            scrollTop: 0 ,
             }, scroll_top_duration
        );
    });

});
</script>

© 著作权归作者所有

共有 人打赏支持
史文帝
粉丝 1
博文 24
码字总数 8566
作品 0
孝感
程序员
私信 提问
简单返回顶部代码及注释说明

1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 返回顶部 方法二:操作scrooll函数用...

lovethe51cto
2015/08/12
0
0
IOS中scrollsToTop问题小结

scrollsToTop小结: UIScrollView是用来展示滚动的一个类。他有UITableView、UITextView等子类。 scrollsToTop是UIScrollView的一个属性,主要用于点击设备的状态栏时,是scrollsToTop == Y...

Daniel_s
2016/04/29
29
0
IOS中scrollsToTop问题小结

scrollsToTop小结: UIScrollView是用来展示滚动的一个类。他有UITableView、UITextView等子类。 scrollsToTop是UIScrollView的一个属性,主要用于点击设备的状态栏时,是scrollsToTop == Y...

Daniel_s
2015/12/25
102
0
ionic通讯录点击滑动效果的实现以及$ionicscrolldelegate使用分析

在诺亚财富项目中,使用到了通讯录,如果只是简单的查看,我个人觉得可能过于单调,于是就在查看的基础上,增加了点击滑动的效果。目的有两个:1.体验不错。2.通讯录的数据量较大,我们在点击...

Simon_ITer
2016/01/17
1K
0
被遗忘的CSS和HTML(二)

前言 先前写了一篇《被遗忘的CSS和HTML(一)》,后来因为各种事情,懒得写。最近把文章分享到掘金收获了不少点赞和鼓励,决定就再写点,希望从另一个角度去看一些问题的解决方法,还是那句话...

VeeQun
06/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

大数据教程(6.1)hadoop生态圈介绍及就业前景

1. HADOOP背景介绍 1.1、什么是HADOOP 1.HADOOP是apache旗下的一套开源软件平台 2.HADOOP提供的功能:利用服务器集群,根据用户的自定义业务逻辑,对海量数据进行分布式处理 3.HADOOP的核心组...

em_aaron
38分钟前
1
0
hadoop垃圾回收站

在生产生,hdfs回收站必须是开启的,一般设置为7天。 fs.trash.interval 为垃圾回收站保留时间,如果为0则禁用回收站功能。 fs.trash.checkpoint.interval 回收站检查点时间,一般设置为小于...

hnairdb
昨天
1
0
腾讯与Github的魔幻会面背后的故事…

10月22日,腾讯开源管理办公室有幸邀请到Github新晋CEO Nat Friedman,前来鹅厂参观交流。目前腾讯已经有近70个项目在Github上开源,共获得17w stars,世界排名11位。Github是腾讯开源的主阵...

腾讯开源
昨天
1
0
单例模式

单例模式(Singleton pattern)属于创建型设计模式。 保证一个类仅有一个实例,并提供一个访问它的全局访问点。 通常我们可以让一个全局变量使得一个对象被访问,但它不能防止你实例化多个对...

NinjaFrog
昨天
2
0
TypeScript基础入门之装饰器(三)

转载 TypeScript基础入门之装饰器(三) 继续上篇文章[TypeScript基础入门之装饰器(二)] 访问器装饰器 Accessor Decorator在访问器声明之前声明。 访问器装饰器应用于访问器的属性描述符,可用...

durban
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部