Question

我在使用<a href="#nameID">进行滚动时遇到了麻烦，因为大多数教程都需要一个ID来识别哪个a链接需要处于活动状态。我试图避免在那里添加id，以便链接保持mywebsite.com而不是mywebsite.com/#nameId。
我想要做的就是这个

首页博客关于联系

如果滚动到div #blog，则导航将

首页博客关于联系

这是导航列表

<nav id="menu-center">
    <ul class="click crsl">
        <li><a class="page1 dot active"></a></li>
        <li><a class="page2 dot"></a></li>
        <li><a class="page3 dot"></a></li>
        <li><a class="page4 dot"></a></li>
    </ul>
</nav>

这是js

<script type="text/javascript">
    $(".page1").click(function() {
        $('html, body').animate({
            scrollTop: $("#home").offset().top
        }, 1000);
    });
    $(".page2").click(function() {
        $('html, body').animate({
            scrollTop: $("#blog").offset().top
        }, 1000);
    });

    $(".page3").click(function() {
        $('html, body').animate({
            scrollTop: $("#about").offset().top
        }, 1000);
    });

    $(".page4").click(function() {
        $('html, body').animate({
            scrollTop: $("#contact").offset().top
        }, 1000);
    });
</script>
<!-- point active carousel -->
<script type="text/javascript">
    $('li a').click(function(e) {
        e.preventDefault();
        $('a').removeClass('active');
        $(this).addClass('active');
    });
</script>

Answer 1

尝试这样的事情

$('.navbar>a').click(function(e){
  //preventing the default href
  e.preventDefault();
  $(this).addClass(active)
  var href = $(this).attr('href');
  $(document).scrollTo(href);
})

Answer 2

您可以使用解决方案https://jsfiddle.net/25fd6nov/

$('.click a').click(function(e){
  e.preventDefault();
  $(this).parent().addClass('active').siblings('li').removeClass('active');
  var id = $(this).data('href');
  $('html, body').animate({
      scrollTop: $("#" + id).offset().top
  }, 1000);
});

.active {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="menu-center">
    <ul class="click crsl">
        <li class="active"><a class="page1 dot" data-href="home">Home</a></li>
        <li><a class="page2 dot" data-href="blog">Blog</a></li>
        <li><a class="page3 dot" data-href="about">About</a></li>
        <li><a class="page4 dot" data-href=contact>Contact</a></li>
    </ul>
</nav>

更新了解决方案 https://jsfiddle.net/25fd6nov/1/

$('.click a').click(function(e){
	e.preventDefault();
  $(this).parent().addClass('active').siblings('li').removeClass('active');
  var id = $(this).data('href');
  $('html, body').animate({
      scrollTop: $("#" + id).offset().top
  }, 1000);
});

$('#main').scroll(function(){
    var element_height = 300;
    var offset = $('#scrollContainer').offset();
    var positive =  Math.abs(offset.top)
    var divided = positive / element_height;
    var round = Math.round(divided);

    var current_element = $('#scrollContainer').children().eq(round);
    var id = current_element.attr('id');

    $(`li[data-li=${id}]`).addClass('active').siblings('li').removeClass('active');

});

.active {
  font-weight: bold;
}

#main {
  width: 100%;
  height: 400px;   
  overflow: auto;
}
#home{
  height: 300px;
  background: red;
  width: 100%;
}

#about{
  height: 300px;
  background: blue;
  width: 100%;
}

#blog{
  height: 300px;
  background: orange;
  width: 100%;
}

#contact{
  height: 300px;
  background: green;
  width: 100%;
}

#scrollContainer{
  positive: relative;
  height: 1200px;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="menu-center">
    <ul class="click crsl">
        <li class="active" data-li="home"><a class="page1 dot" data-href="home">Home</a></li>
        <li data-li="blog"><a class="page2 dot" data-href="blog">Blog</a></li>
        <li data-li="about"><a class="page3 dot" data-href="about">About</a></li>
        <li data-li="contact"><a class="page4 dot" data-href=contact>Contact</a></li>
    </ul>
</nav>

<div id="main">
  <div id="scrollContainer">
    <div id="home"></div>
    <div id="blog"></div>
    <div id="about"></div>
    <div id="contact"></div>
  </div>
</div>

希望这会对你有所帮助。

如何在滚动时使用addClass活动但不使用href id？

2 个答案: