滚动时显示div并更改行为

Question

有时我已经看过了，但是我不知道如何实现它或如何搜索它。 这就是为什么我要解释它的作用：

假设我们得到一个图像，一个箭头，它指向下方，当您单击它时，页面向下滚动。 现在，当我向下滚动并到达指定点时，箭头指向上方，将我带回到页面顶部。

感谢您的任何回复=）

编辑：我找到了一个例子。 请参阅底部的小箭头，以及到达页面末尾时的变化方式。 rorymcilroy.com

Answer 1

您可以使用jQuery ScrollTo插件

这是一个演示

这是您想要的jsfiddle演示（使用scrollTo插件）

jsfiddle演示

javascript：

$('#upDownArrow').click(function() {
    if($(this).hasClass("arrowUp")) {
        $.scrollTo( '#top', 500); // scroll to top      
        $(this).removeClass("arrowUp");
        $(this).addClass("arrowDown");
    } else {
        $.scrollTo( '#bottom', 500); // scroll to bottom
        $(this).removeClass("arrowDown");
        $(this).addClass("arrowUp");     
    }
});

HTML：

<div id="#top"></div>
<div id="upDownArrow" class="arrowDown"><div class="arrow"></div></div>

<!-- add your content here -->

<div id="#bottom"></div>

CSS：

#upDownArrow {
    position: fixed;
    top: 50px;
    right: 50px;
    width: 30px;
    height: 30px;
    background: #33B;
}
#upDownArrow:hover {
    background: #99F;
    cursor: pointer;
}

#upDownArrow.arrowDown:hover .arrow {
    border-top-color: #99F;   
}

#upDownArrow.arrowUp:hover .arrow {
    border-bottom-color: #99F;   
}

#upDownArrow.arrowUp .arrow {
    position: absolute;
    border: 15px solid transparent;
    border-bottom: 15px solid #33B;
    top: -30px;
}

#upDownArrow.arrowDown .arrow {
    position: absolute;
    border: 15px solid transparent;
    border-top: 15px solid #33B;
    bottom: -30px;
}

如果您需要上一个/下一个按钮，则可能必须创建一个项目/ id /位置的列表（请参阅scrollTo插件的文档以查看可以使用的参数），该过程应按以下步骤进行：

var steps = ["top","part1","part2","bottom"];

然后创建2个按钮，一个用于向上，一个用于向下，然后使用：

var currentPosition = 0;

$("#buttonUp").click(function() {
    if(currentPosition == 0) {
        currentPosition = steps.length-1;
    } else {
        currentPosition--;
    }
    $.scrollTo('#'+steps[currentPosition],500);        
});

$("#buttonDown").click(function() {
    if(currentPosition == steps.length-1) {
        currentPosition = 0;
    } else {
        currentPosition++;
    }
    $.scrollTo('#'+steps[currentPosition],500);        
});

这是带有向上和向下按钮的演示：

向上和向下的jsfiddle演示

jsfiddle全屏演示

这是另一个演示，滚动显示您的“按钮更改”；）

jsfiddle按钮更改演示

Answer 2

如果我对您的理解正确，那么这个问题与您的相同。

Answer 3

我前一段时间写了这个 。 我认为这就是您要寻找的。

$('a').on('click', function (event) {
    event.preventDefault();//stop the browser from jumping to the anchor
    var href  = $(this).attr('href'),  // get id of target div from link e.g #one #two 
        oset  = $(href).offset().top;   // get the offset top of the div
    $('html, body').stop().animate({
        scrollTop : oset  // animate the scrollTop property to the offset of target div
    }, 1000, function () {   
        location.hash = href; // change the hash to target div  
    });
});