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元素的高度
    });

    我们来看看运行效果:

    到页面底部

     

    返回页面顶部

  • 相关阅读:
    9.vue之v-show
    8.vue之计数器
    Elasticsearch日志-docker安装Elasticsearch
    Elasticsearch日志-错误记录-聚合查询
    Elasticsearch日志-yum安装Kibana
    禅道邮箱配置记录
    docker容器内安装服务
    docker容器内查看容器系统
    CentOS7防火墙配置
    Linux服务器docker运行的时间差
  • 原文地址:https://www.cnblogs.com/caidupingblogs/p/6002039.html
Copyright © 2011-2022 走看看