CSS小知识---回到顶部

所需js文件

<script type="text/javascript" src="js/jquery-1.11.3.js"></script>

在body中添加

<a id="goTop" class="gotoTop" href="#"><img src="images/top.png"></a>

.gotoTop的style样式

.gotoTop {
    display: none;
    bottom: 20px;
    height: 70px;
    position: fixed;
    right: 20px;
    width: 70px;
}

js函数

$(function () {
    $("#goTop").click(
        function(){$(‘html,body‘).animate({scrollTop:0},700);}//滚动条的垂直位置设为0,页面移动速度为700
    )
    $(window).scroll(function(){
        var s = $(window).scrollTop(); //返回滚动条的垂直位置
        if( s > 0){
            $("#goTop").fadeIn(100);
        }else{
            $("#goTop").fadeOut(200);
        };
    });
})

如此,即可实现回到顶部的功能。

时间: 2024-10-11 01:50:58

CSS小知识---回到顶部的相关文章

12个你未必知道的CSS小知识

虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过. 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员都使用过.如果你并不是一个特别有经验的程序员,我相信你未必知道color属性除了能用在文本显示,还可以用作其它地方. 请注意,上面的代码里只使用了一个color属性,就是在body元素上,设置成了yellow.但是,你也看到了,所有这个页面上的东西都变成了黄色

【前端词典】几个有益的 CSS 小知识

今天偷个懒,不长篇大论,分享几个你可能不知道的 CSS 小知识. 样式的顺序 CSS 代码: HTML 代码: 记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) 答案你们应该是知道的. 可以这样提升 CSS 性能 后代选择器 样式选择器中间的空格是什么?它的名字是 —— 后代选择器. 为什么会更消耗性能呢? 因为浏览器首先会找到所有p标签,然后再向上查找包含class为div标签.这样一来如果代码中有很多p标签,无疑是会做很多重复工作的. 所以可以减少使用 HTM

几个有益的 CSS 小知识

样式的顺序 CSS 代码: HTML 代码: 记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) 答案你们应该是知道的. 可以这样提升 CSS 性能 后代选择器 样式选择器中间的空格是什么?它的名字是 —— 后代选择器. 为什么会更消耗性能呢? 因为浏览器首先会找到所有p标签,然后再向上查找包含class为div标签.这样一来如果代码中有很多p标签,无疑是会做很多重复工作的. 所以可以减少使用 HTML 标签来定义 CSS 的方式,换成使用具体的class. 浏览器

12个css小知识

1.CSS的color属性并非只能用于文本显示对于CSS的color属性,相信所有Web开发人员都使用过.如果你并不是一个特别有经验的程序员,我相信你未必知道color属性除了能用在文本显示,还可以用作其它地方.它可以把页面上的所有的东西都变颜色.比如:无法显示的图片的alt文字list元素的边框无序list元素前面的小点有序list元素前面的数字还有hr元素 2.CSS里的visibility属性有个collapse属性值:collapse对于CSS里的visibility属性,相信你用过不下

页面小功能 - 回到顶部

<div id="to_top"> <div class="dp_float"><a><img src="${pageContext.request.contextPath}/css/gy/image/dp_icon.png" /><br />回顶部</a></div></div> <%-- 返回顶部:baoxw --%> <styl

一些常被你忽略的CSS小知识

1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员都使用过.如果你并不是一个特别有经 验的程序员,我相信你未必知道color属性除了能用在文本显示,还可以用作其它地方.它 可以把页面上的所有的东西都变颜色.比如: 无法显示的图片的alt文字. list元素的边框.无序list元素前面的小点.有序list元素前面的数字和hr元素等 1: <html> 2: <head> 3: <meta http-equiv="cont

css小知识

1.什么是css? 中文名:层叠样式表 英文名:Cascading Style Sheets 英文缩写:CSS 其他称呼:级联样式表 2.css选择器种类 通配选择器 类型选择器 ID选择器 类选择器 包含选择器 子元素选择器 相邻兄弟选择器 属性选择器 3.css选择器权值计算: 4.css盒子模型: css盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型 css盒子模型具有属性:内容(content).填充(padding).边框(border).边界(margin) 5.c

CSS小知识---table表格

所用的仍是bootstrap的模板 <link rel="stylesheet" href="css/bootstrap.min.css"> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/jq

js---小火箭回到顶部

比较粗糙,能到到效果,点击小火箭回到顶部,期间有小火箭的特效, 用到了css3的动画,JS的滚动事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">