我正在尝试在页面中间添加两个粘贴(向上和向下)箭头,它们可以滚动分成几个部分的网页。所以箭头总是在中间出现在第二部分到最后一部分并允许向上或向下滚动页面。
目前我有一个按钮可以将我带到网页的顶部
.content-wrap section .back-to-top {
display: block;
position: absolute;
bottom: -65px;
right: 10px;
height: 36px;
width: 36px;
background: url(http://www.caddet-re.org/assets/images/Arrow_Circle_Up.gif);
text-indent: -9999px;
z-index: 2;
}
<a class="back-to-top" href="#main">Back to Top</a>
给我:
各部分的结构是:
<div class="content-wrap">
<section id="main">
<!--content-->
</section>
<section id="portfolio">
<!--content-->
</section>
...
</div>
最佳答案
我稍微修改了你的代码:
http://jsfiddle.net/BorisDutkin1982/ZapgY/1/
我希望这就是你的意思。您也可以添加“向下”按钮:
只要确保它在“arrows-container”内并且 css 参数是
除了top:45%
之外,与“向上”按钮相同,将其更改为bottom:45%
。
如果你只想在第二部分之后显示箭头,你需要添加
一个用于“滚动”的事件监听器,用于检查用户滚动页面的位置。
您可以使用 scrollTop()
方法...
一段代码例如:
$(document).ready(
function(){
$("body").live(
"scroll",
function(){
if($("body").scrollTop == NUMBER_OF_PIXELS_FROM_TOP_OF_THE_PAGE){
$("arrow").show();
}
}
);
}
);
说明:我向“主体”添加了滚动 Action 的监听器。如果距页面顶部的距离是第二部分所在的位置,则每次用户滚动正文/页面时 - 显示 arroa
关于jquery 粘住上下滚动箭头,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15093486/