鱼C论坛

 找回密码
 立即注册
查看: 2587|回复: 6

[庖丁解牛] 0 0 9 4 - 神奇的悬浮图层

[复制链接]
发表于 2017-3-23 15:53:38 | 显示全部楼层 |阅读模式
购买主题 已有 3 人购买  本主题需向作者支付 5 鱼币 才能浏览

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-3-25 20:26:43 | 显示全部楼层
js代码,我试了一下,未运行成功。 楼主确定判别document.body.scrollTop 能成功吗?
求一份网页的完整代码。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-3-26 12:19:27 | 显示全部楼层
lylslll 发表于 2017-3-25 20:26
js代码,我试了一下,未运行成功。 楼主确定判别document.body.scrollTop 能成功吗?
求一份网页的完整代 ...


这个是调用jQuery哦~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-8-28 23:19:16 | 显示全部楼层
function()加载不了的原因是 document.body.scrollTop   一直是 0 。
当页面指定了DTD,即指定了DOCTYPE时,使用document.documentElement.scorllTop。
页面没有DTD,即没指定DOCTYPE时,使用document.body.scroll。
而我的页面加了<!DOCTYPE html>,所以如下
     /*判断回到顶部按钮显示与否*/
     window.onscroll=function(){
         var scrollTop = document.documentElement.scrollTop;
            if(scrollTop > 500){
                nav.className = "show";
            }else{
                nav.className = "";
            }
    }
解决方法源地址: http://www.cnblogs.com/starof/p/5238654.html
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-9-15 17:10:17 | 显示全部楼层
本帖最后由 上帝也幽默 于 2018-9-15 17:20 编辑

依葫芦画瓢,试着用jQ实现以上功能
  1. <script type="text/javascript" src="jquery-3.2.1.js"></script>
  2.         <script type="text/javascript">       
  3.                 $(document).ready(function(){
  4.                         $(window).scroll(function(){
  5.                                 nav = $(window).scrollTop();
  6.                                 if(nav > 666){
  7.                                         $('#top').addClass('show');
  8.                                 }
  9.                                 else{
  10.                                         $('#top').removeClass('show');
  11.                                 }
  12.                         });
  13.                         $('#top').click(function(){
  14.                                 $('body,html').animate({scrollTop:0},1000);
  15.                         });
  16.                 });
  17.         </script>
复制代码

评分

参与人数 1荣誉 +2 鱼币 +2 贡献 +2 收起 理由
继续思索 + 2 + 2 + 2 这个正解!

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 1 反对 0

使用道具 举报

发表于 2019-4-1 12:25:48 | 显示全部楼层
上帝也幽默 发表于 2018-9-15 17:10
依葫芦画瓢,试着用jQ实现以上功能

感谢
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-4-19 18:45:36 | 显示全部楼层
加了jq也出不来,那个top内容不显示了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-28 19:51

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表