Hey,吃完饭多陪陪家人吧!

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

   

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

测试了原生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
 
 
发表评论