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 ...
随机推荐
- poj 1936 All in All
All in All Time Limit: 1000 MS Memory Limit: 30000 KB 64-bit integer IO format: %I64d , %I64u Java ...
- log_reuse_wait_desc为REPLICATION,日志暴大,无法收缩
早上检查数据发现,有一台数据的硬盘空间只剩下几MB.习惯性检查日志文件,发现日志文件居然暴增到了350多GB 首先备份日志,再收缩-------无变化.(实际上日志备份每1小时1挡,正常在跑.) -- ...
- Magicodes.WeiChat——后台JS框架封装
Magicodes.WeiChat同时也致力于提高后台开发效率,因此对在后台前端这块也做了一定的封装.我们先来说说主要的框架JS——mwc.js和mwc_elements.js.这两个JS文件位于Sc ...
- ArcServer 10.0 “No Content”、“Server Host Cannot be null” 错误
问题一:"No Content" 问题描述: 在输入服务地址时:http://192.168.1.180/arcgis/services 结果出现下面的错误: 解决办法: ...
- KALI LINUX WEB 渗透测试视频教程—第16课 BEEF基本使用
Kali Linux Web 渗透测试视频教程—第16课 BeEF基本使用 文/玄魂 目录 Kali Linux Web 渗透测试视频教程—第16课 BeEF基本使用............... ...
- 冲刺阶段day3
day3 项目进展 今天周三,我们五个人难得的一整个下午都能聚在一起.首先我们对昨天的成果一一地查看了一遍,并且坐出了修改.后面的时间则是做出 登录界面的窗体,完善了登录界面的代码,并且实现了其与数据 ...
- [ACM_水题] ZOJ 3712 [Hard to Play 300 100 50 最大最小]
MightyHorse is playing a music game called osu!. After playing for several months, MightyHorse disco ...
- [BTS] Deploy Command
BizTalkDeploymentTools.AddResource.bat @Echo OFF SET ApplicationName=%~1 SET ComponentType=%~2 SET C ...
- 我的fckeditor实践
一开始我不懂这个ConnectorServlet是何用处,后来发现是专门用于文件上传的,因为fckeditor默认是不支持这个功能的. ConnectorServlet: /* * FCKeditor ...
- 使用bee自动生成api文档
beego中的bee工具可以方便的自动生成api文档,基于数据库字段,自动生成golang版基于beego的crud代码,方法如下: 1.进入到gopath目录的src下执行命令: bee api a ...