zoukankan      html  css  js  c++  java
  • JavaScript之返回顶部

    为了弄这个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元素的高度
    });

    我们来看看运行效果:

    到页面底部

     

    返回页面顶部

  • 相关阅读:
    数字基本数据类型范围比较
    java中float和double的区别
    ASP.NET中javascript与c#互相访问
    Javascript技术之详尽解析event对象
    Java基础-Java中的Calendar和Date类
    逻辑运算符
    JS获取当前时间
    几秒后刷新页面
    【LiteOS】LiteOS任务篇源码分析删除任务函数
    POJ 2385 Apple Catching (DP)
  • 原文地址:https://www.cnblogs.com/caidupingblogs/p/6002039.html
Copyright © 2011-2022 走看看