当达到底部部分时,Jquery用锚文本隐藏Div

时间:2016-07-29 12:56:13

标签: javascript jquery html css

我有一个自动滚动功能,有一个静态箭头,让用户滚动到页面的下一部分。当用户到达"联系"部分(最后一页),我想隐藏箭头,因为没有其他页面向下滚动。

更新 -

目前导航箭头在最后一页上消失了,但它也在about和intro部分消失了。我该如何修复

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>

谢谢!

1 个答案:

答案 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;
    }
  });
}