.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);
}
JS代码:
(function() {
var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').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(); });
})();

css+js回到顶部的更多相关文章

  1. 详解原生JS回到顶部

    第一次知道可以用超链接(锚点)实现回到顶部的时候我是很震惊的,想着原来可以这么简单啊!但是作为一个正在学习JS的小白,不能就这么轻易止步,所以查资料自己整了一个JS返回顶部. HTML代码: ? 1 ...

  2. html css jquery 回到顶部按钮

    今天做了个回到顶部的功能,在这里记录一下,有需要可以拿去试试! CSS部分,很简单就一个class /*回到顶部*/ .back-top { position: fixed; right: 15px; ...

  3. js回到顶部------转载

    [1]锚点 使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [注意] ...

  4. CSS实现回到顶部图片hover后改变效果

    任何网站中回到顶部元素不可缺少,一般为了实现交互效果,都会在鼠标hover后元素样式有所改变.今天这个实例便是采用CSS中的transform知识实现. hover: <!DOCTYPE htm ...

  5. js回到顶部

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 原生js回到顶部

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. JS回到顶部代码小记

    HTML: <div id="goTop"> <a href="#top"><img src="~/Content/th ...

  8. css&js实现顶部banner滚动提示效果

    以一个小例子来展示滚动提示的代码部分: try.html <div id="scrollobj" > <span class="scrollTxt&qu ...

  9. js回到顶部 动画速度 (自己记录)

    x=x-20; 设置回到每10s的速度, function gotoTop(){ var x=document.body.scrollTop||document.documentElement.scr ...

随机推荐

  1. win10家庭版快速升级专业版

    win10家庭普通版升级专业版方法: 1.点击“开始”,选择控制面板. 2.点击“系统与安全”,选择“Windows Anytime Upgrade”.(或者:单击「开始」按钮,在搜索框中,键入any ...

  2. 启动Tomcat时报 Expected stackmap frame at this location.(JDK1.7编译)

    从svn上下的项目,部署到tomcat 7.0.19 上, 并且配置的是jdk7.  启动时出现以下问题. Location: com/genlot/loms/service/SysPermissio ...

  3. 启动WCF多个服务方法

    引用就不说明,直接贴上: using System;using System.Collections.Generic;using System.Linq;using System.Text;using ...

  4. Maven 命令速记

    1. 创建项目 1) 创建父目录 mvn archetype:generate -DgroupId=com.qunar.training -DartifactId=training -Dversion ...

  5. PHP操作Mongodb之高级查询篇

    本文主要讲解PHP中Mongodb的除了增删改查的一些其他操作. 在PHP操作Mongodb之增删改查篇中我们介绍了PHP中Mongodb的增加.删除.修改及查询数据的操作.本文主要是将查询时用到的高 ...

  6. Twitter的分布式自增ID算法snowflake (Java版)

    概述 分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的. 有些时候我们希望能使用一种 ...

  7. Codeforces 738D. Sea Battle 模拟

    D. Sea Battle time limit per test: 1 second memory limit per test :256 megabytes input: standard inp ...

  8. vmware安装linux6.3

    安装信息: 1.vmware9.0下载地址:http://pan.baidu.com/share/link?shareid=1287299796&uk=2585121485 2.oraclel ...

  9. Sanarus公司的Cassi微创乳房活检设备投入使用

    这种新型可转动的大核心乳房活检设备,是一种全自动一次性的手工操作的设备.该设备对乳房造成的创伤最小,是传统乳房活检设备很好的替代选择. 该设备被称作Cassi,操作方便而且无需准备时间.无需固定设备的 ...

  10. javascript学习第五课this、call、apply

    js函数与其它 高级语言相比有一个特点.没有返回值,一个简单函数就是function关键字+函数名字构成 this 对象是在运行中基于函数的执行环境绑定的,在全局函数中,this等于window,而当 ...