原生jsjs不等于怎么写写页面到底部和顶部反弹

来源：蜘蛛抓取(WebSpider) 时间：2015-03-24 04:40 标签： js怎么写
“回到顶部”-带缓动效果，附JS源码
对于特别长的网页，通常需要一个“回到顶部”按钮。
经常有人分享这个简单的效果，但是往往找不到，最近项目中用到了，所以分享并记录下来。
带有缓动效果，主要是使用jQuery中的animate 方法实现的。
首先肯定要引入jQuery了，引入方法请百度
$(document).ready(function(e) {
//页面滚动事件
$(window).scroll(function(){
//获取窗口已滚动的高度
var windowScrollTop=$(window).scrollTop();
var oTools=$("#tools");
//如果大约100PX，就渐显出“回到顶部”，否则即隐藏
if(windowScrollTop>100)
oTools.fadeIn();
oTools.fadeOut();
$("#back_top").click(function(){
//点击“回到顶部”，滚动到顶部，并带动画效果
$(",body").animate({scrollTop:0},1000);
实现思路：
1、“回到顶部”工具栏默认是隐藏的
2、当页面滚动时触发滚动事件，并判断当页面滚动距离大于100PX，就渐显出工具栏，小于100px即隐藏
3、点击“回到顶部”即调用动画，滚动会顶部
您对本文章有什么意见或着疑问吗？请到您的关注和建议是我们前行的参考和动力&&
您的浏览器不支持嵌入式框架，或者当前配置为不显示嵌入式框架。原生js广告代码制作可展开关闭的页面上固定的图片对联广告代码
分享到 18:03:28阅读(3623)
过几秒(时间自己设置)关闭，可以展开关闭的多图对联效果
下载资源：240次
下载积分：30分
代码评分：
10.0(已有3人评分)
很好的。用到了。
效果不错，多谢分享！
效果不错，多谢分享！
挺好还不错功能比较强代码很清li的地方可以加点js代码解决
很好，简单明了
一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播不法有害信息！
二、互相尊重，对自己的言论和行为负责。
下载该资源用户也下载了
未注册过用户可以点击直接登录哦！
使用注册邮箱登录下次自动登录
现在的位置:
& 综合 & 正文
defer和async（原生js学习）
页面下载过程要干的事情
页面parse完毕----DOMContentLoaded（DOM树建立完毕）----onload（全部资源下完，图片，iframe，flash这些）
注意js脚本要下载并执行完毕，dom树才能出来，因为script标签也属dom的一部分，同时因为js也许有dom的操作，所以必须要等js脚本执行完毕，才能完成dom的构建。
parse的过程则可理解为对文档全部扫一遍，知道要干什么，接下来才是整个DOM的构建过程。parse the markup and set the dom
如果既没defer也没async，而且js仍放于头部，则页面要等待js的下载和js的执行，会出现空白页的情况。
defer不被所有浏览器支持。defer之后，脚本的执行在页面解析完毕以后，在DOMContentLoaded事件之前。
async的特点是，一下载完成就执行，多个js如果都设置async则能形成并行下载，不一定按照文档的排放顺序，所以多个js之间有依赖关系，则容易出现问题，同时只能应用于外部脚本。
Asynchronous scripts are guaranteed to execute before the page’s load event and may execute before or after DOMContentLoaded (see Chapter 13 for details). Firefox 3.6, Safari 5, and Chrome 7 support asynchronous scripts.
async最少要比load快，，，，有可能快或者慢于DOMContentLoaded（不知道为什么，感觉它要比defer还快的，而且defer都是快于DOMContentLoaded，这个疑问以后来搞。。）
如果async为true，脚本会异步下载，异步执行，页面解析并不受影响。
如果async为false，defer为true，那么脚本会在页面解析完毕后才执行（有defer的时候，js脚本的下载并不会影响文档的解析，脚本在页面解析完后执行，这个时候脚本再执行完毕后，才构建好DOM，所以一定是先于DOMContentLoad事件的）
如果async和defer都为false，那么脚本会在页面解析中，停止页面解析，立刻下载并且执行，形成block阻塞。
设置defer和async后，两者的加载（下载）都不阻塞页面渲染（parse），但是async是下载后就立即执行，所以会在parse完毕前执行，这个执行过程会阻塞页面渲染（怕有dom操作），而defer是一定不会阻塞的，因为它执行的时候，页面已经parse完毕（后面脚本执行，修改dom不算进来）。
IE不支持DOMContentLoaded事件，检测doScroll来模拟（判断页面是否可以滚动）
&&&&推荐文章:
【上篇】【下篇】popus.js弹出模式页面使用方法整理总结
//唐初登陆框
function testMessageBox(ev)
var objPos = mousePosition(ev);
var cont = '<form action="/sys/login.action" name="loginSubmit" id="login_form" method="post"> 密码
自动登录&&';
messContent=
showMessageBox('用户登录您如果还没账号，请点击&',messContent,objPos,700);
//登录处理的一些js
//登录按钮
function loginClick(){
if(checkValidate()==true){
$('#login_form').submit();
$(document).bind("keydown", function(event){
if(event.keyCode == 13 && checkValidate()==true){
$('#login_form').submit();
//自动登录
function checkLogin(obj) {
if (obj.checked == true && checkValidate()==true) {
$('#login_form').submit();
//输入验证
function checkValidate(){
var userName=$("#loginUser").val();
if(!(/^[_\.0-9a-z-]&#43;@([0-9a-z][0-9a-z-]&#43;\.){1,4}[a-z]{2,3}$/).test(userName)){
$("#showName").html("邮箱&#26684;式不正确");
$("#showName").html("");
var pwd=$("#pwd").val();
if($.trim(pwd)==""){
$("#showpwd").html("密码不能为空");
$("#showpwd").html("");
submitForm();
function submitForm(){
$('#login_form').form({
onSubmit: function(){
success:function(data){
var value = eval("(" &#43; data &#43; ")");
if(value.result=='success'){
$("#umessagelogin").html("登录成功");
setTimeout(function(){
window.location.href='/index.';
} else if (value.result='msg'){
$("#umessagelogin").("用户不存在");
}else if (value.result='error'){
$("#umessagelogin").html("异常");
页面调用位置：
您对本文章有什么意见或着疑问吗？请到您的关注和建议是我们前行的参考和动力&&
您的浏览器不支持嵌入式框架，或者当前配置为不显示嵌入式框架。

我要回帖

更多关于 js怎么写 的文章

 

随机推荐