jquery - 页面滚动平滑链接与按钮next和prev [英] jquery - inpage scroll smooth links with button next and prev

问题描述

我发现这个网站，我希望它的工作方式，但不幸的是我对jquery的知识较少，但我知道如何进行简单的修改以使其工作，

I found this site and i want the way it work but unfortunately I have less knowledge in jquery but I know how to do simple modification to make it work,

我当前的js代码在这里：

my current js code is here:

$(".fadeScroll").click(function (event) {
          event.preventDefault();
          //calculate destination place
          var dest = 0;
          if ($(this.hash).offset().top > $(document).height() - $(window).height()) {
              dest = $(document).height() - $(window).height();
          } else {
              dest = $(this.hash).offset().top;
          }
          //go to destination
          $('html,body').animate({
              scrollTop: dest
          }, 2000, 'swing');
      });

但是它只能顺利滚动（ inpage Links 下一步按钮它不工作，我不知道接下来要做什么。我喜欢这个网站的效果，因为它能让访问者了解他/她是什么内容，因为菜单活动状态也在下一个，上一个按钮与菜单协调并且工作良好

but it only do is to scroll smoothly (inpage Links), the next button its not working and I have no idea what the next thing to do. I like this effect of this site because it give the visitor the Idea on what content he/she is, because of the menu have active state also next and prev button coordinate with the menu and work nicely

这里是我目前的 FIDDLE

HOPE THIS MAKE SENSE

HOPE THIS MAKE SENSE

推荐答案

我已经更新了您的标记和脚本，其中一个主要的问题是，你使用相同的类名称在prev&下一步按钮...

I have updated your markup and script to do what you want. One of the main issues was that you were using the same class name on the prev & next buttons...

更新的脚本使用单个函数来控制滚动。各种按钮更新项目索引以滚动到，然后调用该函数。

The updated script uses a single function to control the scrolling. The various buttons update the item index to scroll to, then call that function.

这里是你更新的小提琴。
和您更新的JS。

here's your updated fiddle. and your updated JS.

var itemIndex = 1;
function scrollToContent() {

    //dont allow zero or greater than 5
    if (itemIndex <= 1) {
        itemIndex = 1;
        $('#fade').hide();
    }
    else{
        $('#fade').show();
    }
    if (itemIndex >= 5) {
        itemIndex = 5;
        $('#fade1').hide();
    }
    else{
        $('#fade1').show();
    }
    //scroll
    $('html, body').animate({
        scrollTop : $('#content' + itemIndex).offset().top
    }, 2000);
    //add & remove active class name
    $('button.active').removeClass('active');
    $('.navigation li:nth-child(' + itemIndex + ') button').addClass('active');
}

//click handlers
function clickFuncs() {
    $(".navigation button").click(function() {
        itemIndex = $(this).attr('data-index');
        scrollToContent();
    });

    $('#fade1').click(function() {++itemIndex;
        scrollToContent();
    });

    $('#fade').click(function() {--itemIndex;
        scrollToContent();
    });
}


$(document).ready(function() {

    //setup click handlers
    clickFuncs();

});

更新HTML

<ul class="navigation">
<li><button data-index="1">content1</button></li>
<li><button data-index="2">content2</button></li>
<li><button data-index="3">content3</button></li>
<li><button data-index="4">content4</button></li>
<li><button data-index="5">content5</button></li>    
</ul>

<p class="buttons">
   <button id="fade">prev</button>
   <button id="fade1">next</button> 
</p>

这篇关于jquery - 页面滚动平滑链接与按钮next和prev的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！