網頁設計JavaScriptjQuery使用 JavaScript 或 jQuery 取得網頁捲動後的高度

取得 body 捲動後的高度

指定符合網頁的文件型別宣告 <!DOCTYPE html> 正確取得 document.documentElement.scrollTop 滾動元素捲動後的高度,使用判斷方式以符合不同之 IE, Firefox, Chrome, Safari, Opera 瀏覽器。

判斷瀏覽器

document.compatMode = CSS1Compat 標準模式
window.opera Opera 顯示為 [object Opera] 其他瀏覽器則顯示為 undefined

JavaScript

function getScrollTop(){
  var bodyTop = 0;
  if (typeof window.pageYOffset != "undefined") {
    bodyTop = window.pageYOffset;

  } else if (typeof document.compatMode != "undefined"
             && document.compatMode != "BackCompat") {
    bodyTop = document.documentElement.scrollTop;

  } else if (typeof document.body != "undefined") {
    bodyTop = document.body.scrollTop;
  }
  /*顯示出捲動後的高度值*/
  document.getElementById("jsScrollTop").innerHTML = bodyTop;
}

0




jQuery .scroll()

jQuery .scroll() 事件可用於滾動的元素和瀏覽器視窗物件 window

只需將函數綁定到指定元素的 scroll 事件,當瀏覽者滾動指定的元素時則會觸發捲動 scroll 事件運行指定的 function 函數。

$(function () {
  $(window).scroll(function () {
    var scrollVal = $(this).scrollTop();
    $("span.qScrollTop").text(scrollVal);
  });
});

0


if(scrollVal > 500){
  /* 如果滾動的物件捲動 > 500 則觸發指定的動作。*/
}