JS回到顶部代码小记
HTML:
<div id="goTop">
<a href="#top"><img src="~/Content/themes/base/images/ico_top.gif" alt="回到页首" title="回到页首 Top"></a>
</div>
CSS:
#goTop {
bottom: 15px;
margin: 0 auto;
position: fixed; //固定定位
margin-left: 945px;
} JS:
//当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
$(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$("#goTop").fadeIn(1500);
}
else {
$("#goTop").fadeOut(1500);
}
}); //当点击跳转链接后,回到页面顶部位置 $("#goTop").click(function () {
$('body,html').animate({ scrollTop: 0 }, 1000);
return false;
});
});
JS回到顶部代码小记的更多相关文章
- 兼容IE,chrome 等所有浏览器 回到顶部代码
今天在博客园看到一片帖子回到顶部代码,索性就看了下,但是发现在非IE浏览器下可以运行,在IE浏览器下却运行不了. 故将其代码搬弄过来做了些许修改后,完美支持了IE下的运行. 主要实现功能代码文件: & ...
- 详解原生JS回到顶部
第一次知道可以用超链接(锚点)实现回到顶部的时候我是很震惊的,想着原来可以这么简单啊!但是作为一个正在学习JS的小白,不能就这么轻易止步,所以查资料自己整了一个JS返回顶部. HTML代码: ? 1 ...
- js回到顶部------转载
[1]锚点 使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [注意] ...
- listView从底部回到顶部代码实现
可用如下方法: 1.平滑的回到顶部,但是会划过中间的每一页 mListView.getRefreshableView().smoothScrollToPosition(0); 2.直接跳到顶部 if ...
- js回到顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生js回到顶部
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- css+js回到顶部
.backToTop { display: none; width: 18px; line-height: 1.2; padding: 5px 0; background-color: #000; c ...
- jquery方法回到顶部代码
<style> /*默认样式,主要是position:fixed实现屏幕绝对定位*/ #gotoTop{display:none;position:fixed;top:75%;left:5 ...
- js回到顶部 动画速度 (自己记录)
x=x-20; 设置回到每10s的速度, function gotoTop(){ var x=document.body.scrollTop||document.documentElement.scr ...
随机推荐
- linux-6的yum软件仓库
yum命令 命令 作用 yum repolist all 列出所有仓库 yum list all 列出仓库中的所有软件包 yum info 软件包名称 查看软件包信息 yum install ...
- 用c#开发微信 (17) 微活动 3 投票活动 (文本投票)
前面介绍了微活动<大转盘> 和 <刮刮卡>,这次介绍下微投票,微投票分二种,一种是文本投票, 一种是图片投票. 下面介绍文本投票的详细步骤: 1. 新建文本投票活动 ...
- 大熊君说说JS与设计模式之------中介者模式Mediator
一,总体概要 1,笔者浅谈 我们从日常的生活中打个简单的比方,我们去房屋中介租房,房屋中介人在租房者和房东出租者之间形成一条中介.租房者并不关心他租谁的房.房东出租者也不关心他租给谁.因为有中介的存在 ...
- Agile 是什么?
也许你已经习惯了 “Agile” 这个词汇不断地在你耳边狂轰滥炸,诸如敏捷团队.敏捷UX.敏捷建模.敏捷需求管理.敏捷架构等等.而且,人们还在不断的将 “Agile” 和更多的词汇进行组合,比如,也曾 ...
- Ubuntu配置git
安装ssh sudo apt-get install openssh-server sudo apt-get install openssh-client 启动SSH服务 sudo /etc/init ...
- BlueDream.js(蓝梦)——jQuery网站使用引导插件
小菜在前端世界游荡有些时间了,常见的插件多少有些了解,但却很少看到用户引导插件. 所谓用户引导插件,就是在第一次使用某个网站时,会弹出一些小动画,告诉你网站的基本使用方法,帮你快速入门. 这应该是个常 ...
- 大数据并行计算利器之MPI/OpenMP
大数据集群计算利器之MPI/OpenMP ---以连通域标记算法并行化为例 1 背景 图像连通域标记算法是从一幅栅格图像(通常为二值图像)中,将互相邻接(4邻接或8邻接)的具有非背景值的像素集合提取出 ...
- Atitit. BigConfirmTips 控件 大数据量提示确认控件的原理and总结O9
Atitit. BigConfirmTips 控件 大数据量提示确认控件的原理and总结O9 1. 主要的涉及的技术 1 2. 主要的流程 1 3. 调用法new confirmO9t(); 1 4. ...
- paip.取当天记录的方法sql跟hql hibernate
paip.取当天记录的方法sql跟hql hibernate #------两个方法...函数法和日期计算法.. 函数法: DATEDIFF(d,createTime,GETDATE())=0 / ...
- 生成月初月末便于拼接sql
for ($i=1; $i < 13; $i++) { $date = strtotime(date("2015-$i-01")); $firstday = date(&qu ...