'scroll to top button' 的一些问题

Question

我有这个 'scroll to top button' 在用户向下滚动 300 像素后弹出。到目前为止一切正常。我现在要做的是让这个按钮在特定元素处弹出。

这里是jQuery:

// hide #back-top first
$("#back-top").hide();

// fade in #back-top
$(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('#back-top').fadeIn();
        } else {
            $('#back-top').fadeOut();
        }
    });

    // scroll body to 0px on click
    $('#back-top a').click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 800);
        return false;
    });
});

好的，然后我更改了这一行

if ($(this).scrollTop() > 100) {

到

if ($(this).scrollTop() > '.show-button-here') {

但是没用。知道我做错了什么吗？

这是一个fiddle：http://jsfiddle.net/v70L4buk/

Answer 1

您需要从页面顶部获取元素的位置，然后在显示向上箭头之前减去您希望该元素距顶部的距离。在这种情况下，当我在页面中创建的 link 距离顶部 300 像素时，我会显示箭头。或者您可以删除数字，当该元素到达视口顶部时，该函数将启动。

if ($(this).scrollTop() > $('.show').offset().top - 300) {

JSFIDDLE: https://jsfiddle.net/gvpLe06c/1/

'scroll to top button' 的一些问题

Some issues with a 'scroll to top button'

html

javascript

jquery

scrolltop