中午好！午休时间哦，朋友一定是不习惯午睡的吧？！

JS/JQ检测页面滚动，显示“返回顶部”按钮

发布于2016-5-13 分类：jQuery / JS 评论(0) 阅读(2,719)
　　　

之前主题的“返回顶部”按钮是无论页面滚动顶部还是底部都一直显示在屏幕中，这样看起来有点不美观，便增加了一点特效：页面滚动到顶部时隐藏、滚动到一定距离就显示。

测试了原生JS和JQ共两种代码：

原生JS：

  1. window.onscroll = function () {  
  2.         var goto_top = document.body.scrollTop;  
  3.         if (goto_top > 168) {
  4.          //滚动条的位置和顶部距离大于168px时显示  
  5.          document.getElementById("float_up").style.display = "block";  
  6.         }  
  7.         else {  
  8.          document.getElementById("float_up").style.display = "none";  
  9.         }  
  10. }  

 

JQ：

 
  1. $(window).scroll(function() {  
  2.         var goto_top = $(window).scrollTop();  
  3.         if (goto_top > 168) {  
  4.         //滚动条的位置和顶部距离大于168px时显示  
  5.            $("#float_up").css("display","block");  
  6.         }  
  7.         else {  
  8.             $("#float_up").css("display","none");  
  9.         }  
  10. });  
未经允许不得转载：Rising Sun's Blog » jQuery / JS » JS/JQ检测页面滚动，显示“返回顶部”按钮
标签：
评论 0
 
 
发表评论