Question

我有一个页面滚动网站，有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。

我还有一个小位置固定按钮，上下有两个箭头。

<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中执行此操作。

Answer 1

假设你有以下标记：

<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 Fiddle demo

参考文献：

Answer 2

由于您提到过帮助您使用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);
  });.

另请参阅This link以获取精彩的内容内容滚动插件！

来源：How to use jquery next() to select next div by class

但也许下次再尝试搜索一下！我花了大约20秒来找到我的来源。（;

祝你好运，玩得开心，

马克。

Answer 3

我会使用一个类标志。

e.g。在链接上使用课程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

寻找最近的链接

3 个答案: