为了弄这个Hexo,今天又是坐在电脑面前待了一天( ⊙ o ⊙ ),老是出问题,在百度上也试验了很多方法,还是没弄好,诶。。。身心疲惫甚是乏累啊~~~

算了,这个Hexo先不弄,还是安分点吧,在Hexo上感觉浪费了很多的时间,毕竟Hexo对我来说还是高大尚的东西,适可而止。

好了!我还是好好搞自己基础的东西吧,做自己该做的事就可以了。

我们回到这章话题,我们都知道都看到过,很多页面都会有“返回顶部”,方便快捷。

最简单的原理就是应用了<a>标签,我们写“底部”和“顶部”两个标签:

scrollHeight:表示滚动条需要滚动的高度,即内部div

scrollTop: 表示滚动条滚动的高度,可能大于外部div

也就是说scrollDiv的高度+scrollTop滚动的最大高度=scrollHeight

<a href="javascript:void(0);" onclick="javascript:document.getElementsByTagName('body')[0].scrollTop=document.getElementsByTagName('body')[0].scrollHeight;">到页面底部</a>
<div style="height:2000px;"></div>
<a href="javascript:void(0);" onclick="javascript:document.getElementsByTagName('body')[0].scrollTop=0;">返回页面顶部</a>

方法:

$(".class").click(function(){
$(".class2").slideDown(300);
$("html,body").animate({"scrollTop":$(document).scrollTop()+100},350); //注:100参数一定要大于.class2元素的高度
});

我们来看看运行效果:

到页面底部

 

返回页面顶部

JavaScript之返回顶部的更多相关文章

  1. 使用Javascript实现返回顶部功能。

    为了提高网站的浏览体验及友好度,相信大部分网站需要一个返回顶部的按钮,如果使用传统的a标记,再做一个div加上链接的话,非常麻烦,不仅每个页面都需要添加,而且不能实现非常智能的效果及简化维护时间. 下 ...

  2. JavaScript/Jquery返回顶部代码

    <!DOCTYPE html> <html> <head> <title>返回顶部</title> <meta charset=&qu ...

  3. JavaScript实现返回顶部效果

    仿淘宝回到顶部效果 需求:当滚动条到一定位置时侧边栏固定在某个位置,再往下滑动到某一位置时显示回到顶部按钮.点击按钮后页面会动态滑到顶部,速度由快到慢向上滑. 思路: 1.页面加载完毕才能执行js代码 ...

  4. JQuery 实现返回顶部

    1.添加html <div id="back-to-top"> <a href="javascript:;" title="返回顶部 ...

  5. javascript返回顶部几种代码总结

    纯js代码 /** * 回到页面顶部 * @param acceleration 加速度 * @param time 时间间隔 (毫秒) **/ function goTop(acceleration ...

  6. 添加“返回顶部”小图标按钮的JS(JavaScript)代码详解

    如何给自己的网站添加方便快捷的"返回顶部"小图标按钮呢?如下图: JS源代码: /** * JavaScript脚本实现回到页面顶部示例 * @param acceleration ...

  7. javascript 缓动返回顶部案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. javascript+JQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...

  9. 【JavaScript&jQuery】返回顶部

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. Android多线程研究(1)——线程基础及源代码剖析

    从今天起我们来看一下Android中的多线程的知识,Android入门easy,可是要完毕一个完好的产品却不easy,让我们从线程開始一步步深入Android内部. 一.线程基础回想 package ...

  2. 拖动窗体FormBorderStyle属性为None的窗体移动

    winform窗体的样式很单一,不够漂亮,往往我们需要对窗体进行重写,但是我们又要保留在重写前窗体本身带的功能,例如拖动窗体的头进行移动之类的. 一下方式可以实现该方法: [DllImport(&qu ...

  3. C#操作XML的完整例子——XmlDocument篇

    这是一个用c#控制台程序下,  用XmlDocument 进行XML操作的的例子,包含了查询.增加.修改.删除.保存的基本操作.较完整的描述了一个XML的整个操作流程.适合刚入门.net XML操作的 ...

  4. iOS开发——实战总结OC篇&网易彩票开发知识点总结

    网易彩票开发知识点总结 关于网易彩票开发中遇到了不少的坑,弄了好久才弄懂,或者有些犹豫很久没用就不记得了,所以这里就总结了一下,希望以后不会忘记,就算忘记也能快速查看! /************** ...

  5. jq实现搜索引擎的提示效果

    (function ($) { $.fn.Search = function (options) { var defaults = { inputid: "search", div ...

  6. shell 笔记

    shell 笔记 通配符 没有 '.' [Aa] 表示 A 或者 a ? 表示任意字符 * 表示任意字符串 IFS data='name, sex, rollno, location' oldIFS= ...

  7. shell导出和导入redis

    1.导出redis #!/bin/bash REDIS_HOST=localhost REDIS_PORT=6379 REDIS_DB=1 KEYNAME=redis:hash:* KEYFILE=k ...

  8. golang之websocket 源码分析

    下载go的websocket包. 1. 通过google官方的方法, 需要hg来同步代码. 由于墙的原因, 还需要设置代理. 比较麻烦 2. http://gopm.io/ 通过该网站下载, 这是go ...

  9. BootStrap2学习日记23---图片轮播

    <div id="carousel1" class="carousel slide"> <div class="carousel-i ...

  10. D. Powerful array 莫队算法或者说块状数组 其实都是有点优化的暴力

    莫队算法就是优化的暴力算法.莫队算法是要把询问先按左端点属于的块排序,再按右端点排序.只是预先知道了所有的询问.可以合理的组织计算每个询问的顺序以此来降低复杂度. D. Powerful array ...