0

我有一个包含 7 页的单页滚动网站，每个页面的高度约为 1000 像素。我的菜单结构是这样的，

<a href="#home" class="home">Home</a>
<a href="#about" class="about">About</a>
<a href="#team" class="team">Team</a>
<a href="#contact" class="contact">Contact</a>

通过单击链接，它将滚动到分配给该部分的相应 ID。

我还有一个小位置固定按钮，带有 2 个向上和向下的箭头。 

<div class="button">
    <i class="go-up"></i> //up arrow
    <i class="go-down"></i> //down arrow
</div>

我想通过单击箭头导航到最近的部分。例如假设我在里面#team，所以当我点击它时.go-up它应该导航到#about并且 .go-down 应该去#contact。同样在移动到另一个之后，#contact这应该确定新的最近目标。

请帮我在jQuery中做到这一点。

4

3 回答 3

2

假设您有如下标记：

<a href="#home" class="home">Home</a>

<a href="#about" class="about">About</a>

<a href="#team" class="team">Team</a>
<a href="#contact" class="contact">Contact</a>

    <div>
        <div id="home">
            <p>Some content in 'home.'</p>
            <div class="button">
                <i class="go-up">&uarr;</i>
                <i class="go-down">&darr;</i></div>
        </div>
        <!-- other sections omitted for brevity -->
    </div>

我建议：

$('.button i').click(
    function(){
        var mvTo = $(this).closest('div[id]')[$(this).hasClass('go-up') ? 'prev' : 'next']().offset(),
            x = mvTo.left,
            y = mvTo.top;
        window.scrollTo(x,y);
    });

JS 小提琴演示。

参考：

于 2013-02-25T20:00:14.957 回答
1

既然您提到帮助您找到使用 jQuery 的解决方案，这里有一个解决方案：

上升可能是这样的：

$('.button > .go-up').on("click",function(){
     var container = $("#mainPageContainer");
     var prevElement = container.prevAll('.aClassToPutOnPageContent:first');
     container.scrollTo(prevElement);
  });

下去可能是：

 $('.button > .go-down').on("click",function(){
     var container = $("#mainPageContainer");
     var nextElement = container.nextAll('.aClassToPutOnPageContent:first');
     container.scrollTo(nextElement);
  });.

另请参阅此链接以获得良好的内容内容滚动插件！

资料来源：如何使用 jquery next() 按类选择下一个 div

但也许下次尝试搜索更多！我花了大约 20 秒才找到我的来源。(;

祝好运并玩得开心点，

马克。

于 2013-02-25T19:20:04.087 回答
1

我会使用班级标志。

例如使用current链接上的类。

$('.button i').click(function () {
    var $anchor = $('.current');
    var direction = $(this).prop('class');

    if (direction == 'go-up' && $anchor.prev().length > 0) {
        $('a').removeClass("current");
        $anchor.prev().addClass("current");
        $('html, body').stop().animate({
            scrollTop: $($anchor.prev().attr('href')).offset().top
        }, 1500);
    } else if (direction == 'go-down' && $anchor.next().length > 0) {
        $('a').removeClass("current");
        $anchor.next().addClass("current");
        $('html, body').stop().animate({
            scrollTop: $($anchor.next().attr('href')).offset().top
        }, 1500);
    }

});

然后您可以使用$('.current')

并使用.prev()和.next()

http://jsfiddle.net/PhckT/1

于 2013-02-25T19:56:56.450 回答