我有一个自动滚动功能,有一个静态箭头,让用户滚动到页面的下一部分。当用户到达"联系"部分(最后一页),我想隐藏箭头,因为没有其他页面向下滚动。
目前导航箭头在最后一页上消失了,但它也在about和intro部分消失了。我该如何修复
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
function nextSection()
{
var scrollPos = $(document).scrollTop();
$('#section-navigator a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top > scrollPos) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
location.hash = "";
location.hash = currLink.attr("href");
if ($($anchor.attr('href')).attr('id') == "contact") {
$("div.page-scroll").hide();
}
return false;
}
});
}
<div class="page-scroll">
<img class="arrow-down page-scroll-btn" src="img/arrow_dark.png" onclick="nextSection()" />
</div>
谢谢!
答案 0 :(得分:2)
根据事物的外观,您使用链接作为下一个选择器的ID,因此您应该在if中使用#contact
。
此外,您已将if括号)
关闭在错误的位置
if ($anchor.attr('href') == "#contact") {
}
如果你想将它与目标divs id进行比较,那么你需要做这样的事情:
if ($($anchor.attr('href')).attr('id') == "contact") {
$("div.page-scroll").hide();
}
但这似乎是获得相同结果的额外处理
更新
鉴于你所做的所有编辑 - 他们都没有真正有用,因为他们没有创建MCVE - 我们似乎正在越来越远离原始问题。我会做以下事情:
当你在html中手动绑定时,摆脱jQuery顶部的jquery onclick绑定函数,将你的下一部分函数更改为:
function nextSection() {
var currentPos = $(document).scrollTop();
$('#section-navigator a').each(function() {
var currLinkHash = $(this).attr("href");
var refElement = $(currLinkHash);
if (refElement.offset().top > scrollPos) { // change this to offset
$('html, body').stop().animate({
scrollTop: refElement.offset().top // just use refElement
}, 1500, 'easeInOutExpo');
location.hash = "";
location.hash = currLinkHash;
if (refElement.attr('id') == "contact") { // hide the scroller if the id is contact
$("div.page-scroll").hide();
}
return false;
}
});
}