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 ...
随机推荐
- ubuntu下配置安装PYQT4
apt-get安装(快) sudo apt-get install libxext6 libxext-dev libqt4-dev libqt4-gui libqt4-sql qt4-dev-tool ...
- h5专题应该兼容那些浏览器?
本人做专题还不算很多,但是也很腻烦了.一般一个专题制作也就3天,可是调试得4/5天.除了销售客户各种无休止的改改改.还有一点很重要就是浏览器的兼容性.刚开始做专题的时候天真的以为苹果只要兼容到ipho ...
- 自己动手写客户端UI库——创建第一个控件
在上一篇文章中我们主要讲了C#如何和JS通信, 这一篇文章中,我们将创建一个最基础的Button控件 WUI库中控件的继承机制 我们先解释最简单的继承机制,以后WUI库的继承机制会比这个复杂的多 ...
- clean code meaningful names
---恢复内容开始--- Meaningful Names: use Intention-Revealing Names //nice,Everyone who reads your code (in ...
- Nginx学习笔记(七) 创建子进程
Nginx创建子进程 ngx_start_worker_processes位于Nginx_process_cycle.c中,主要的工作是创建子进程. 在Nginx中,master进程和worker进程 ...
- JS练习题1共7题
<p>1 一个新人入职,月工资为2000元的员工,每年涨工资5%,到退休时的月工资是多少?</p> <script> document.write(Math.rou ...
- 公钥,私钥,SSL(讲的很生动) (转) 对称加密、非对称加密初探
最近开始做消息推送,有不少概念性的东西需要知道,首先应该了解的是密钥.这片文章很清晰的讲解了对称密钥.非对称密钥.ssl的知识. 原文地址:http://chenling1018.blog.163.c ...
- Leetcode 58 Length of Last Word 字符串
找出最后一个词的长度 class Solution { public: int lengthOfLastWord(string s) { , l = , b = ; while((b = s.find ...
- Java band [Cite]
SampleModel 取样模型Databuffer 数据缓冲区 Raster 光栅Sample 样本band 带 SampleModel是java awt中的一个抽象类,它定义了一个接口,用于提 ...
- Shell获取上一个月、星期的时间范围
#!/bin/bash date_today=`date -d '1 day ago' +%Y%m%d` #最近7天 date_befor_7day=`date -d '7 day ago' +% ...