Javascript 使导航在整页脚本中可单击_Javascript_Jquery

Javascript 使导航在整页脚本中可单击

javascript jquery

Javascript 使导航在整页脚本中可单击,javascript,jquery,Javascript,Jquery,我有一个基于完整页面脚本的一个变体的简单项目。除了一件恼人的事情外，一切都很完美——我不知道如何使我的右导航项目符号可点击（到适当的部分）。我的js知识目前还不太好，所以我非常感谢大家的帮助。谢谢 $.fullPage=函数（选项）{ var defaultOpt={ 方框：“#fullPageBox”，//滚屏页父元素第页：“.fullPage”，//滚屏页面索引：true，//是否显示索引持续时间：1000，//动画时间方向：“垂直”//滚屏方向水平还是垂直循环：true//是

我有一个基于完整页面脚本的一个变体的简单项目。除了一件恼人的事情外，一切都很完美——我不知道如何使我的右导航项目符号可点击（到适当的部分）。我的js知识目前还不太好，所以我非常感谢大家的帮助。谢谢

$.fullPage=函数（选项）{
var defaultOpt={
方框：“#fullPageBox”，//滚屏页父元素
第页：“.fullPage”，//滚屏页面
索引：true，//是否显示索引
持续时间：1000，//动画时间
方向：“垂直”//滚屏方向 水平还是垂直
循环：true//是否循环
},
这个=这个，
指数=0，
过度=正确；
this.option=$.extend（{}，defaultOpt，option{}）；
this.box=$（this.option.box）；
this.pages=$（this.option.page）；
this.duration=this.option.duration；
// 绑定鼠标滚轮事件
$（文档）.on（“mousewheel-DOMMouseScroll”，函数（ev）{
var dir=ev.originalEvent.wheelDelta | |-ev.originalEvent.detail；
如果（超过===错误）返回；
目录<0？下一页（）：上一页（）；
});
if（this.option.index）{
初始化分页（）；
};
函数初始化分页（）{
var oUl=$（“”），
liStr=“”；
for（var i=0，len=This.pages.length；i”；
};
$（document.body）.append（oUl.append（$（liStr））；
$（“#fullPageIndex li”）.eq（index）.addClass（“活动”）.sides（）.removeClass（“活动”）；
};
函数下一页（）{
如果（索引


*{
保证金：0；
填充：0；
}
html，
身体{
身高：100%；
溢出：隐藏；
}
.pageBox{
位置：相对位置；
身高：100%；
}
梅因先生{
宽度：100%；
身高：500%；
最小宽度：1200px；
位置：绝对位置；
左：0；
排名：0；
颜色：#fff；
}
.main.整版{
身高：25%；
}
.bg1{
背景色：#27AE60；
}
.bg2{
背景色：#3498DB；
}
.bg3{
背景色：#C0392B；
}
.bg4{
背景色：#4FC2E5；
}
.bg5{
背景色：#8E44AD；
}
#全页索引{
位置：绝对位置；
最高：50%；
右：20px；
转化：translateY（-50%）；
}
#全文索引李{
宽度：10px；
高度：10px；
列表样式：无；
背景色：黑色；
利润率：6px0；
边界半径：50%；
}
#fullPageIndex li.active{
背景色：白色；
}

jQuery fullPage.js
第二节
第三节
第四节
第五节
$.fullPage（）；
您的脚本中有一些错误
首先，从HTML文件中删除以下代码：
<script>
  fullPage();
</script>

*{
保证金：0；
填充：0；
}
html，
身体{
身高：100%；
溢出：隐藏；
}
.pageBox{
位置：相对位置；
身高：100%；
}
梅因先生{
宽度：100%；
身高：500%；
最小宽度：1200px；
位置：绝对位置；
左：0；
排名：0；
颜色：#fff；
}
.main.整版{
身高：25%；
}
.bg1{
背景色：#27AE60；
}
.bg2{
背景色：#3498DB；
}
.bg3{
背景色：#C0392B；
}
.bg4{
背景色：#4FC2E5；
}
.bg5{
背景色：#8E44AD；
}
#全页索引{
位置：绝对位置；
最高：50%；
右：20px；
转化：translateY（-50%）；
}
#全文索引李{
宽度：10px；
高度：10px；
列表样式：无；
背景色：黑色；
利润率：6px0；
边界半径：50%；
}
#fullPageIndex li.active{
背景色：白色；
}

jQuery fullPage.js
第二节
第三节
第四节
第五节
向div添加id属性，并向导航到所需部分的列表元素添加锚定。详情如下:
<body>
  <div class="pageBox">
    <div class="main" id="fullPageBox">
      <div id="section1" class="fullPage bg1">jQuery fullPage.js</div>
      <div id="section2" class="fullPage bg2">Section 2</div>
      <div id="section3" class="fullPage bg3">Section 3</div>
      <div id="section4" class="fullPage bg4">Section 4</div>
      <div id="section5" class="fullPage bg5">Section 5</div>
    </div>
  </div>

  <script>
    $.fullPage();
  </script>

</body>

可以在第页找到代码片段的源。谢谢！工作很好，但我如何才能添加一个平滑的动画滚动点击？工程伟大！非常感谢，伙计！最初的问题是使导航项目符号可单击，并使项目符号滚动到适当的部分。这个答案并没有解决这个问题。
function initPagination() {
  var oUl = $("<ul id='fullPageIndex'></ul>"),
    liStr = "";
  for (var i = 0, len = This.pages.length; i <= len; i++) {
    var sectionNum = i + 1;
    liStr += '<li><a href="#section' + sectionNum + '"></a></li>';
  };
  $(document.body).append(oUl.append($(liStr)));
  $("#fullPageIndex li").eq(index).addClass("active").siblings().removeClass("active");
};

$('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
        || location.hostname == this.hostname) {

        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
           if (target.length) {
             $('html,body').animate({
                 scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    }
});