jquery回到頁面頂部按鈕

2022-03-19 14:00:48 字數 955 閱讀 6013

昨天看到乙個園友的blog中有個頁面下滾後出現用於"回到頁面頂部"按鈕的效果, 感覺挺不錯的, 所以自己也寫了乙個, 用jquery寫是再簡單不過了. 下面就直接給出**了

1

.scroll-up

25.scroll-up:hover

下面是jquery**

1 ;(function

($) , $.scrollbtn.defaults, options);45

var $scrollbtn = $('

').css().addclass('scroll-up')

9 .attr('title', opts.title)

10 .click(function

() , opts.duration);

1314 $(window).bind('scroll', function

() else

2526

if(isie6())

30});

3132

function

isie6() 36}

37};

3839/**

40* -params

41* -showscale: scroll down how much to show the scrollup button

42* -right: to right of scrollable container

43* -bottom: to bottom of scrollable container

44*/

45 $.scrollbtn.defaults =

52})(jquery);

5354

$.scrollbtn();

回到頁面頂部

html結構 class suspension class consultation src assets images cut icon slices cut homepage kefu.png alt div class goto top class icon ypt icon ypt icon...

回到頂部按鈕

最近學習使用hexo搭建了乙個部落格,theme 使用的是geekman 在jakman基礎修改的乙個版本 在部落格中加入了回到頂部,偶然一次看到hexo 折騰筆記中的回到頂部的百分比樣式的按鈕效果,很炫酷,所以自己動手照著教程造了輪子,具體效果可進本人部落格檢視 idancy。這裡我主要針對自己的...

點選按鈕,回到頁面頂部的5種寫法

1.錨點方式 回到頂部 2.scrolltop scrolltop屬性表示被隱藏在內容區域上方的畫素數。元素未滾動時,scrolltop的值為0,如果元素被垂直滾動了,scrolltop的值大於0,且表示元素上方不可見內容的畫素寬度 由於scrolltop是可寫的,可以利用scrolltop來實現回...