HTML学习笔记之二（回到顶部与回到底部）

回到顶部回到底部

回到顶部的俩种方式

一、使用js

[javascript] view plaincopy

$('html, body').animate({ scrollTop: 0 }, 'fast');//带动画
$('html,body').scrollTop(0); //不带动画

[javascript] view plaincopy

$(window).scroll(function () {
//You've scrolled this much:
$('p').text("You've scrolled " + $(window).scrollTop() + " pixels");
});

二、使用 a 标签的name属性

[html] view plaincopy

<a name="top">top</a>
<a href="#top">Click here go back to the top.</a>

三、获取高度

1. 整个文档高度

[javascript] view plaincopy

var body = document.body,
html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
// 或者
var height = $(document).height();

2. 当前屏幕高度

[javascript] view plaincopy

var wheight = $(window).height();

HTML代码

[html] view plaincopy

<div id="back-top">
<button class="styled-button">TOP</button>
</div>
<div id="back-end">
<button class="styled-button">TOP</button>
</div>
<div id="footer"></div>

js代码

[javascript] view plaincopy

jQuery(document).ready(function($){
/**
* 回到顶部
*/
$('#back-top').click(function(){
$('html,body').stop();
$('html,body').animate({
scrollTop:'0px'
},1000);
});
/**
* 回到底部
*/
$('#back-end').click(function(){
$('html,body').stop();
$('html,body').animate({
scrollTop:$('#footer').offset().top
},1000);
});
});

[javascript] view plaincopy

//回到顶部的显示隐藏代码
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top').click(function () {
$('body,html').animate({
scrollTop: 0
}, 'fast');
return false;
});
});
});

css代码

[html] view plaincopy

#back-top{position: fixed; bottom:20px; right: 2%; z-index: 100; }

HTML学习笔记之二（回到顶部与回到底部）相关推荐

Python语言入门这一篇就够了-学习笔记(十二万字)
Python语言入门这一篇就够了-学习笔记(十二万字) 友情提示:先关注收藏,再查看,12万字保姆级 Python语言从入门到精通教程. 文章目录 Python语言入门这一篇就够了-学习笔记(十二万字 ...
glibc-2.23学习笔记（二）—— free部分源码分析
glibc-2.23学习笔记(二)-- free部分源码分析 _libc_free _int_free 函数定义局部变量 start fast bins部分 unsorted bins部分 mmap ...
Windows异常学习笔记（二）—— 内核异常处理流程用户异常的分发
Windows异常学习笔记(二)-- 内核异常处理流程&用户异常分发用户层与内核层异常内核异常分析 KiDispatchException 分析 RtlDispatchException ...
Windows APC学习笔记（二）—— 挂入过程执行过程
Windows APC学习笔记(二)-- 挂入过程&执行过程基础知识挂入过程 KeInitializeApc ApcStateIndex KiInsertQueueApc Alertabl ...
Windows系统调用学习笔记（二）—— 3环进0环
Windows系统调用学习笔记(二)-- 3环进0环要点回顾基本概念 _KUSER_SHARED_DATA 0x7FFE0300 实验:判断CPU是否支持快速调用第一步:修改EAX=1 第二步: ...
WinDbg学习笔记（二）--字符串访问断点
标题: [原创]WinDbg学习笔记(二)--字符串访问断点作者: gaorqing 时间: 2009-07-25,21:39:04 链接: http://bbs.pediy.com/sho ...
《运营之光》-- 学习笔记（二）
11,不同类型产品和公司运营工作内容差异 1,工具类产品注重效率,通常产品大于运营,运营的关注点是用户增长,主要手段包括渠道推广.BD和部分活动等,运营和数据打交道更多点 2,社交类产品注重社交氛 ...
Unity超基础学习笔记（二）
Unity超基础学习笔记(二) 1. 基本数据类型的扩展之前在K12中学习了一些基本的数据类型,实际上C#支持更多的数据类型.如下: 注意无符号整型数和有符号整型数的表示范围,例如: int 能表示 ...
jQuery学习笔记（二）
jQuery学习笔记(二) 二.管理jQuery包装集 1.创建新的元素使用HTML DOM 创建元素 var select=document.createElement("select& ...
【OS学习笔记】二十五保护模式七：任务和特权级保护对应的汇编源代码
本汇编代码是以下两篇文章讲解的内容的内核代码; [OS学习笔记]二十三保护模式七:保护模式下任务的隔离与任务的特权级概念 [OS学习笔记]二十四保护模式七:调用门与依从的代码段----特权级保护 ...

HTML学习笔记之二（回到顶部与回到底部）

一、使用js

二、使用 a 标签的name属性

三、获取高度

1. 整个文档高度

2. 当前屏幕高度

HTML学习笔记之二（回到顶部与回到底部）相关推荐

最新文章

热门文章

HTML学习笔记之二（回到顶部 与 回到底部）

一、使用js

二、使用 a 标签的name属性

三、获取高度

1. 整个文档高度

2. 当前屏幕高度

HTML学习笔记之二（回到顶部 与 回到底部）相关推荐

最新文章

热门文章

HTML学习笔记之二（回到顶部与回到底部）

HTML学习笔记之二（回到顶部与回到底部）相关推荐