學(xué)習(xí)啦>學(xué)習(xí)電腦>電腦硬件知識(shí)>鍵盤(pán)鼠標(biāo)>

使用jQuery滾動(dòng)條高度的方法

時(shí)間: 迪豪910 分享

  愛(ài)學(xué)習(xí)的小伙伴們你們知道怎么使用Jquery獲取滾動(dòng)條的位置嗎?不知的話(huà),跟著學(xué)習(xí)啦小編一起如何使用jquery獲取高度的方法吧。

  jQuery獲取滾動(dòng)條高度的相關(guān)方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
jquery 獲取滾動(dòng)條高度
 
獲取瀏覽器顯示區(qū)域的高度 : 
$(window).height(); 
獲取瀏覽器顯示區(qū)域的寬度 :
 
$(window).width(); 
獲取頁(yè)面的文檔高度 :
$(document).height(); 
獲取頁(yè)面的文檔寬度 :$(document).width();
 
獲取滾動(dòng)條到頂部的垂直高度 :
 
$(document).scrollTop(); 
獲取滾動(dòng)條到左邊的垂直寬度 :
 
$(document).scrollLeft();
 
計(jì)算元素位置和偏移量:
 
$(id).offset();
 
offset方法是一個(gè)很有用的方法,它返回包裝集中第一個(gè)元素的偏移信息。默認(rèn)情況下是相對(duì)body的偏移信息。結(jié)果包含 top和left兩個(gè)屬性。
 
offset(options, results)
options.relativeTo  指定相對(duì)計(jì)
算偏移位置的祖先元素。這個(gè)元素應(yīng)該是relative或absolute定位。省略則相對(duì)body。
options.scroll  是否把
滾動(dòng)條計(jì)算在內(nèi),默認(rèn)TRUE
options.padding  是否把padding計(jì)算在內(nèi),默認(rèn)false
options.margin
  是否把margin計(jì)算在內(nèi),默認(rèn)true
options.border  是否把邊框計(jì)算在內(nèi),默認(rèn)true

  使用js獲取滾動(dòng)條底部的相關(guān)方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//回到頁(yè)面頂部
    $("#goTotop").click(function(){
        $('body,html').animate({scrollTop:0},1500); //點(diǎn)擊按鈕讓其回到頁(yè)面頂部
    });
    
    $(window).scroll(function() {
        var yheight1=window.pageYOffset; //滾動(dòng)條距頂端的距離
        var yheight=getScrollTop(); //滾動(dòng)條距頂端的距離
        var height =document.documentElement.clientHeight//瀏覽器可視化窗口的大小
        var top=parseInt(yheight)+parseInt(height)-217;
        var divobj=$(".kf");
        divobj.attr('style','top:'+top+'px;');
    })
    
/**
 * 獲取滾動(dòng)條距離頂端的距離
 * @return {}支持IE6
 */
function getScrollTop() {
        var scrollPos;
        if (window.pageYOffset) {
        scrollPos = window.pageYOffset; }
        else if (document.compatMode && document.compatMode != 'BackCompat')
        { scrollPos = document.documentElement.scrollTop; }
        else if (document.body) { scrollPos = document.body.scrollTop; } 
        return scrollPos; 
}

使用jQuery滾動(dòng)條高度的方法

愛(ài)學(xué)習(xí)的小伙伴們你們知道怎么使用Jquery獲取滾動(dòng)條的位置嗎?不知的話(huà),跟著學(xué)習(xí)啦小編一起如何使用jquery獲取高度的方法吧。 jQuery獲取滾動(dòng)條高度的相關(guān)方法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 2
推薦度:
點(diǎn)擊下載文檔文檔為doc格式

精選文章

  • 如何用jquery實(shí)現(xiàn)右鍵菜單
    如何用jquery實(shí)現(xiàn)右鍵菜單

    愛(ài)學(xué)習(xí)的小伙伴都會(huì)用過(guò)jquery,但是叫你實(shí)現(xiàn)右鍵菜單,你知道怎么做嗎?不知道的話(huà),看一下由學(xué)習(xí)啦小編為你整理的關(guān)于如何用jquery實(shí)現(xiàn)右鍵菜單的資料

  • 在java中實(shí)現(xiàn)左右鍵菜單
    在java中實(shí)現(xiàn)左右鍵菜單

    愛(ài)學(xué)習(xí)的小伙伴們相信都會(huì)使用JAVA編程,但是你知道怎么用JAVA語(yǔ)言實(shí)現(xiàn)鼠標(biāo)的左右鍵嗎?下面由學(xué)習(xí)啦小編為你整理的資料,希望你們喜歡。 在java中實(shí)現(xiàn)

  • IE3.0怎么更換微動(dòng)
    IE3.0怎么更換微動(dòng)

    關(guān)于IE3.0鼠標(biāo)的使用方法相信大家都會(huì),但是叫你換微動(dòng)嗎?不會(huì)也沒(méi)關(guān)系,下面由學(xué)習(xí)啦小編為你整理的關(guān)于如何更換微動(dòng)的資料,希望你們喜歡。 微軟

  • 使用鼠標(biāo)實(shí)現(xiàn)cf一鍵瞬狙
    使用鼠標(biāo)實(shí)現(xiàn)cf一鍵瞬狙

    《穿越火線(xiàn)》是一款全球火爆的第一人稱(chēng)射擊游戲的網(wǎng)絡(luò)游戲,玩家體驗(yàn)到的不僅僅體驗(yàn)到了開(kāi)槍的爽快感,更是來(lái)自相互合作及默契帶來(lái)的戰(zhàn)略意義。人

1827953