javascript - 滚动时显示 div 并更改行为

Question

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

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

编辑:我找到了一个例子。查看底部的小箭头以及到达页面末尾时它如何变化。 rorymcilroy.com

Answer 1

你可以使用 jQuery ScrollTo Plugin

这是一个demo

这里有一个 jsfiddle 演示(使用 scrollTo 插件)

jsfiddle demo

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 demo with up and down

jsfiddle demo up and down fullscreen

这里是另一个演示，你的“按钮变化”在滚动条上；)

jsfiddle button changes demo