Question

如何在我的博客中建立链接，以便当有人点击它时，该链接会将网页滚动回到页面顶部？我已经在线阅读了这个教程http://www.webtipblog.com/adding-scroll-top-button-website/，其中大部分教程都向您展示了如何将图像合成以滚动到顶部。

如果您向下滚动到我的博客，http://goneintranslation.blogpost.ca会出现一个名为＆＃34; home＆＃34;的链接。我想建立这个链接，以便当用户点击它时滚动到顶部。有没有人知道任何文章或如何对其进行编码以实现它？

非常感谢。

编辑;我想做这样的网站，http://thechrisellefactor.com/，滚动到底部，它有一个链接说＆＃34;返回到页面顶部。＆＃34;

Answer 1

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

这就是魔术发生的地方。如果单击名为＆＃34的类的元素; scroll-top-wrapper＆＃34;它将发出scrollToTop函数。

此类中的元素是图像还是普通链接并不重要。

Answer 2

JS Fiddle

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

将.top或class替换为id，将其滚动到顶部

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

Answer 3

我们需要使用jquery animate方法来解决这个问题......

jQuery代码

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

http://jsfiddle.net/6g4af5b5/

动画滚动到顶部链接

3 个答案: