当前位置：文江博客话题详情

显示“返回顶部”向下滚动时使用 jQuery 链接元素

发布于 2024-11-06 13:58:17 字数 207 浏览 0 评论 0原文

我想用 jQuery 模仿行为，就像你在这里看到的那样： http://edo.webmaster.am/

只需查看右下角，向下滚动一点，您就会看到“返回顶部”按钮。

因此，它是不可见的，直到您向下滚动页面然后它才会出现（动画）。

我怎样才能在 jQuery 中做到这一点？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

深爱不及久伴 2024-11-13 13:58:17

您可以监视当前窗口滚动位置并采取相应措施。如果您希望偏移量位于某个点之后（下面的代码将进行任何滚动，甚至 1px），那么只需检查 $(this).scrollTop() > > if 语句中的 n，其中 n 是所需的偏移量。

http://jsfiddle.net/robert/fjXSq/

$(window).scroll(function() {
    if ($(this).scrollTop()) {
        $('#toTop:hidden').stop(true, true).fadeIn();
    } else {
        $('#toTop').stop(true, true).fadeOut();
    }
});

You can monitor the current window scroll position and act accordingly. If you want the offset to be after a certain point (the below code will do any scrolling, even 1px) then just check that $(this).scrollTop() > n in the if statement, where n is the desired offset.

http://jsfiddle.net/robert/fjXSq/

$(window).scroll(function() {
    if ($(this).scrollTop()) {
        $('#toTop:hidden').stop(true, true).fadeIn();
    } else {
        $('#toTop').stop(true, true).fadeOut();
    }
});

回复收藏 0 原文

唐婉 2024-11-13 13:58:17

老问题，但我想，自从我为自己实现了一个，就可以给我两分钱。我相信最好使用 setTimeout 来防止多个触发事件的安全。像这样：

function showButton() {


    var button  = $('#my-button'), //button that scrolls user to top
        view = $(window),
        timeoutKey = -1;

    $(document).on('scroll', function() {
        if(timeoutKey) {
            window.clearTimeout(timeoutKey);
        }
        timeoutKey = window.setTimeout(function(){

            if (view.scrollTop() < 100) {
                button.fadeOut();
            }
            else {
                button.fadeIn();
            }
        }, 100);
    });
}

$('#my-button').on('click', function(){
    $('html, body').stop().animate({
        scrollTop: 0
    }, 500, 'linear');
    return false;
});

//call function on document ready
$(function(){
   showButton();
});

Old question but I thought since I implemented one for myself to give my two cents. I believe it is better to use a setTimeout to safeproofing against multiple triggered events. Like this:

function showButton() {


    var button  = $('#my-button'), //button that scrolls user to top
        view = $(window),
        timeoutKey = -1;

    $(document).on('scroll', function() {
        if(timeoutKey) {
            window.clearTimeout(timeoutKey);
        }
        timeoutKey = window.setTimeout(function(){

            if (view.scrollTop() < 100) {
                button.fadeOut();
            }
            else {
                button.fadeIn();
            }
        }, 100);
    });
}

$('#my-button').on('click', function(){
    $('html, body').stop().animate({
        scrollTop: 0
    }, 500, 'linear');
    return false;
});

//call function on document ready
$(function(){
   showButton();
});

回复收藏 0 原文

~没有更多了~