2016-07-29 141 views
1

我有一个自动滚动功能,有一个静态箭头可以让用户滚动到页面的下一部分。当用户到达“联系”部分(最后一页)时,我希望箭头隐藏,因为没有其他页面可以向下滚动。当底部页面部分到达时,jquery隐藏带锚文本的div

更新 -

目前最后一页上的导航箭头自败,但它也自败在约和简介部分太..我怎样才能解决

jQuery的 - 更新V3

$(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; 


     } 


    }); 
} 

HTML

<div class="page-scroll"> 
    <img class="arrow-down page-scroll-btn" src="img/arrow_dark.png" onclick="nextSection()" /> 
</div> 

谢谢!

+0

做的:

获取你的jQuery的顶部,要手动在HTML你的下一个部分的功能结合,改变以摆脱的jQuery的onclick绑定功能的你在控制台上打印$($ anchor.attr('href'))的值来检查执行是否进入'if'块?如果是的话$($ anchor.attr('href'))的值是多少?去做。因为很可能,您的执行不会进入'if'块并执行'else'块。在else块中添加一条语句,如console.log(“else block”),以查看它是否进入if块或else块。 –

+0

你应该在'if($($ anchor.attr('href'))=='contact')'' – Poonam

+0

mm'这样的括号里使用'if'的条件,如果我把它放在奇怪的位置 - if($($ anchor.attr ('href'))==“contact”){ $(“a.page-scroll”)。hide(); } } 它仍然无法正常工作......我应该把它放在下一个函数或第一个函数 – user1673498

回答

2

通过你使用链接的外观作为下一个选择器的ID,所以你应该在你的if中使用#contact

而且,你已经关闭了,如果支架)放错了地方

if ($anchor.attr('href') == "#contact") { 
} 

如果要比较它的目标div的ID,那么你需要做这样的事情:

if ($($anchor.attr('href')).attr('id') == "contact") { 
    $("div.page-scroll").hide(); 
} 

但是这看起来像额外的处理,以获得相同的结果

更新

考虑到你所有的编辑 - 他们没有真正有用,因为他们没有创建一个MCVE - 而且我们似乎正在越来越远离原始问题。我会做到以下几点:

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; 
    } 
    }); 
} 
+0

:(这仍然不工作 – user1673498

+0

@ user1673498对不起,看编辑,只是注意到你有一个额外的'$'在那里 – Pete

+0

仍然没有...我会更新我的代码谢谢 – user1673498