热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

jquery配合css简单实现返回顶部效果

返回顶部效果想必大家并不陌生吧,其实实现方法有很多,在本文为大家介绍下使用jquery是如何轻易实现的,感兴趣的朋友可以参考下
CSS:
代码如下:

.backToTop {
display: none;
width: 18px;
line-height: 1.2;
padding: 5px 0;
background-color: #000;
color: #fff;
font-size: 12px;
text-align: center;
position: fixed;
_position: absolute;
right: 10px;
bottom: 100px;
_bottom: "auto";
cursor: pointer;
opacity: .6;
filter: Alpha(opacity=60);
}

jQuery代码
代码如下:

(function() {
var $backToTopTxt = "返回顶部", $backToTopEle = $('
').appendTo($("body"))
.text($backToTopTxt).attr("title", $backToTopTxt).click(function() {
$("html, body").animate({ scrollTop: 0 }, 120);
}), $backToTopFun = function() {
var st = $(document).scrollTop(), winh = $(window).height();
(st > 0)? $backToTopEle.show(): $backToTopEle.hide();
//IE6下的定位
if (!window.XMLHttpRequest) {
$backToTopEle.css("top", st + winh - 166);
}
};
$(window).bind("scroll", $backToTopFun);
$(function() { $backToTopFun(); }); })();:

推荐阅读
  • 这一篇主要总结一下jQuery这个js在引入的时候做的一些初始化工作第一句window.undefinedwindow.undefined;是为了兼容低版本的IE而写的因为在低版本 ... [详细]
  • MyBatis模糊查询和多条件查询一、ISmbmsUserDao层根据姓名模糊查询publicListgetUser();多条件查询publicList ... [详细]
  • python自学教程哪里好,python比较好的教程
    本文目录一览:1、想学python去哪里比较好? ... [详细]
  • 软件自动化测试的学习路线
    软件自动化测试的学习步骤软件测试交流群关注软件测试技术公众号获取阅读目录软件自动化测试的学习步骤自动化测试的本质自动化测试学习的误区自动化测试的职位自动化测试分类Web自动化 ... [详细]
  • Adapter相当于C(Controller,控制器),listView相当于V(View,视图)用于显示数据为ListView提供数据的List,数组或数据库相当于MVC模式中的 ... [详细]
  • 本节书摘来自华章计算机《Web前端开发最佳实践》一书中的第2章,第2.2节,作者:党 建更多章节内容可以访问云栖社区“华章计算机”公众号查看。2.2 前端代码重构代码 ... [详细]
  • pdf怎么把html变成pdf1 用AdobeAcroat8.1.2,打开网页后,页面右键菜单中会出现一个“转换为AobePDF的选项,点击就可以转换。 安装AdobeAcroba ... [详细]
  • 子元素过滤器在页面设计过程中需要突出某些行时,可以通过基本过滤选择器中的:eq()来实现表单中行的凸显,但不能同时让多个表具有相同的效果。在jQuer ... [详细]
  • 结束jquery时间不长,写代码感觉很生,而且敢接写起来很费劲做点简单的总结。首先主要要先引入.juery.js文件第二一些js插件文件也要在jquer ... [详细]
  • JS·经典·炫彩菜单(动画效果) for jquery
    CSS样式body{font-size:12px;}.menuBox{width:50%;height:auto;margin:0auto;}.menuBoxul{margin:0 ... [详细]
  • 一般的网页我的项目能够很容易的实现换肤性能,能够通过js扭转link元素中引入的css主题款式链接。然而微信小程序不能动静扭转wxss文件,所以须要其余的计划来实现。 ... [详细]
  • 首页#father{border:0pxso ... [详细]
  • 这两天做了一个小项目,里面有个下载进度的进度条需要制作。先看呈现的效果:点击进度,然后依次递增,直到递增到百分之百。现在把这部分代码分享下来。<!DOCTYPEhtml><html ... [详细]
  • 一、vue-resource1、引入资源方式1)下载vue-resource.js,添加到项目中2)CDN:http:www ... [详细]
  • div显示如下div中添加的html,进行拼接$(#showResult).append(html);在div中添 ... [详细]
author-avatar
长相守短相思洪
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有