HTML学习笔记之二(回到顶部 与 回到底部)

回到顶部 回到底部

回到顶部的俩种方式

一、使用js

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

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

二、使用 a 标签的name属性

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

三、获取高度

1. 整个文档高度

 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. 当前屏幕高度

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

HTML代码

<!-- 侧边栏 按钮-->
        <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代码

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);
    });
});
//回到顶部的 显示 隐藏代码
		   $(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代码

#back-top{position: fixed; bottom:20px; right: 2%; z-index: 100; }
时间: 2024-10-07 11:14:18

HTML学习笔记之二(回到顶部 与 回到底部)的相关文章

HTML5学习笔记(二)——表单1

表单一直是网页必不可少的一部分,一直以来,表单的作用被无限扩展,发展出了诸多新奇的用法,老版的HTML只支持很少的一部分常用表单,许多的新表单都需要借助CSS与JavaScript语言来进行构建,现在HTML5来了,她带来了新的表单,这些强大的表单项,可以省去一大块复杂的JavaScript代码,很值得去学习. 而且在新的表单里面,不再像以前每个表单都必须位于<form></form>之内,只要在<form></form>内定义一个id,然后在网页任何位置都

Git学习笔记(二)

本次学习的是 版本回退 基本命令: 查看提交历史      git log 版本回退            git reset 查看每一次的命令 git reflog 具体步骤: 添加一句话到readme.txt中,并提交到Git库中. . readme.txt在Git中目前有三个版本: 按提交时间先后顺序排列如下: 第一个:wrote a readme.txt 第二个:add distrubuted 第三个:add difficulties 如果版本过多的话,根本记不住,只能查看使用命令git

ASP.Net MVC开发基础学习笔记:二、HtmlHelper与扩展方法

一.一个功能强大的页面开发辅助类—HtmlHelper初步了解 1.1 有失必有得 在ASP.Net MVC中微软并没有提供类似服务器端控件那种开发方式,毕竟微软的MVC就是传统的请求处理响应的回归.所以抛弃之前的那种事件响应的模型,抛弃服务器端控件也理所当然. 但是,如果手写Html标签效率又比较低,可重用度比较低.这时,我们该怎样来提高效率呢?首先,经过上篇我们知道可以通过ViewData传递数据,于是我们可以写出以下的Html代码: <input name="UserName&quo

《Effective C++》学习笔记(二)

原创文章,转载请注明出处:http://blog.csdn.net/sfh366958228/article/details/38706483 闲谈 这两天都是先在地铁里看了会<Effective C++>,然后再回公司继续看,起先是因为地铁里太多无聊,手机也没信号,可看着看着发现里面的内容越来越"接地气",开始有点无法自拔起来. 今天依旧是翻阅着找自己感兴趣的开始看,先是回到条款02,接下来把设计与声明给看完了,来看看今天的收获把. 条款02:尽量以const,enum,

Unix文件系统学习笔记之二: 文件描述符、inode和打开文件表

Unix文件系统学习笔记之二: 文件描述符.inode和打开文件表 系统盘上数据的布局 文件系统无非是关于数据在磁盘上的组织以及存储空间管理的,为此,首先需要知道磁盘上数据的总体布局方式.以Unix为例,最重要的一张表如下: Unix 进程管理中和用户文件.io 最相关的数据结构:usr 数据结构 The procstructure does not record information related to file access.  However the userstructure con

C++primer学习笔记(二)——Chapter 4

4.1  Fundamentals 1.Basic Concepts (1)操作符分为一元,二元或者三元操作符: (2)复杂的表达式中含有很多操作符时: 规则一:分为不同的级别,级别高的先运行: 规则二:相同级别的操作符有执行顺序的确定: (3)操作符可以改变操作数的类型 一般将级别低的转化成级别高的 (4)重载运算符 相同的运算符在对不同类型的对象进行操作的时候,会有不同的功能: (5)Lvalue和Rvalue 显而易见:Lvalue指的是Left value,Rvalue指的是Right

struts2学习笔记(二)—— 获取登录信息及计算在线人数

实现目的: 1.点击"Login"的超链接,进入登录页面 2.填写登录信息,提交表单,将用户信息保存进Session 3.显示用户名,并计算在线人数 4.点击"Logout"的超链接,在线人数减一,并使Session失效 Struts2实现: 1.配置web.xml文件 <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http:/

《语义网基础教程》学习笔记(二)

二.RDF概述(参考http://zh.transwiki.org/cn/rdfprimer.htm) 1.本体: 一个本体是一个概念体系(conceptualization)的显式的形式化规范. 一般来说,一个本体形式地刻画一个论域.一个典型的本体由有限个术语及它们之间的关系组成. ★在万维网这个环境中,本体提供了对给定领域的一种共识.这种共识对于消除术语差别是必要的. 通过把各自的术语差异映射到一个公共的本体之间的直接映射,可以消除这些术语差异. 不管采用哪种方案,本体都支持语义可共用性(s

《iOS应用逆向工程》学习笔记(二)iOS系统目录结构(部分)

首先下载个iFile,可以用来直观地查看iOS系统的目录结构. 下面记录一些关键的iOS目录结构: /var:"variable"的简写,存放一些经常更改的文件,例如日志.用户数据.临时文件等.其中/var/mobile/Applications下存放了所有App Store App. /Applications:存放所有的系统App和来自Cydia的App,不包括App Store App.越狱的过程把/Applications变成了一个符号链接,实际指向/var/stash/App

现代C++学习笔记之二入门篇2,数据转换

static_cast:    这种强制转换只会在编译时检查. 如果编译器检测到您尝试强制转换完全不兼容的类型,则static_cast会返回错误. 您还可以使用它在基类指针和派生类指针之间强制转换,但是,编译器在无法分辨此类转换在运行时是否是安全的. dynamic_cast: dynamic_cast在运行时检查基类指针和派生类指针之间的强制转换. dynamic_cast 是比 static_cast 更安全的强制类型转换,但运行时检查会带来一些开销. const_cast:    con