2014-10-19 124 views
0

如何在我的博客中創建鏈接,以便當有人點擊它時,鏈接會將網頁滾動回頁面頂部?我已經在線閱讀了諸如此類的教程,http://www.webtipblog.com/adding-scroll-top-button-website/,其中大多數教程都向您展示瞭如何合併圖片以滾動到頂部。動畫滾動到頂部鏈接

如果您向下滾動到我的博客,http://goneintranslation.blogpost.ca有一個名爲「home」的鏈接,我想將此鏈接設置爲當用戶點擊它時滾動到頂部。有沒有人知道任何文章或如何編碼,使其發生?

非常感謝。

編輯;我想做一些類似於這個網站的東西,http://thechrisellefactor.com/,滾動到底部,它有一個鏈接,說「返回頁面頂部」。

回答

1
$('.scroll-top-wrapper').on('click', scrollToTop); 

這就是魔術發生的地方。 如果您單擊名爲「scroll-top-wrapper」的類的元素,它將發出scrollToTop函數。

如果此類中的元素是圖像或簡單鏈接,則無關緊要。

0

JS Fiddle

$(window).scroll(function() { 
    if ($(window).scrollTop() > 250) { 
     $('.top').addClass('show'); 
    } else { 
     $('.top').removeClass('show'); 
    } 
}) 

取代.topclassid上它應該滾動到頂部

$(".top").click(function (event) { 
    event.preventDefault(); 
    $('html,body').animate({ 
     scrollTop: 0 
    }, 1000); 
}) 
0

我們需要使用jQuery的動畫的方法來解決這個...

jQuery代碼

$("#scrollT").click(function(e){ 
    e.preventDefault(); 
    $("html, body").animate({ scrollTop: "0px" }); 
}); 

http://jsfiddle.net/6g4af5b5/