1

我举了一个例子和插件来滚动到页面上的某个元素。当您单击上一个和下一个时，您可以使用相同的类从一个跨度滚动导航到另一个跨度......源演示的工作方式略有不同。我试着修改了一下，现在我不知道为什么不起作用？我哪里错了？

源码演示：http ://www.webdesignerwall.com/demo/scrollto-demo/

到目前为止我的情况：http: //jsfiddle.net/64UBs/1/

html:

<div id="nav-dock"> 
  <a id="prev" href="#">&uarr; Prev</a> 
  <a id="next" href="#">&darr; Next</a>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class=text>
  <b>First</b>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis augue sapien, in  facilisis lorem ullamcorper eu. 
  Nunc at nulla metus. Pellentesque posuere quam id nunc <span class="highlight1">posuere</span> sagittis. 
  Vivamus varius euismod nisi, ac condimentum mauris aliquam vitae. Ut faucibus eros vitae pharetra eleifend. P
  ellentesque volutpat facilisis porttitor. Nullam in turpis a nulla placerat placerat.    
</div>
<br<br><br><br><br><br>
<div class=text>
  <b>Second</b>
  Cras semper purus sit amet euismod molestie. Vivamus dapibus hendrerit elit eget tristique. 
  Ut pulvinar adipiscing magna, eget viverra risus sollicitudin et. Morbi odio lacus, malesuada vel dapibus vitae, blandit ut metus. 
  Vivamus cursus fringilla <span class="highlight1">felis</span> id facilisis.   
</div>
<br><br><br><br><br><br>
<div class=text>
  <b>Third</b>
  Aliquam et mattis mi. Mauris vel sagittis orci, id tempor neque. Aenean at arcu eu quam suscipit fermentum. 
  Sed tempor, urna in malesuada sollicitudin, nulla erat <span class="highlight1">malesuada</span> ligula, sed ultricies ipsum dui a dui. 
  Ut at sem quis lectus aliquet vulputate.     
</div>
<br><br><br><br><br><br>
<div class=text>
  <b>Fifth</b>
  Praesent sagittis tortor a purus euismod ultrices eu vitae est. Vivamus a facilisis dolor. 
  Donec id tincidunt erat. Fusce elementum imperdiet augue, at pretium lectus <span class="highlight1">dictum</span> sit amet. 
  Nullam pharetra dui arcu, ut tempus nulla interdum non. Etiam et mattis augue.    
</div>

脚本：

$(function() {

function scroll(direction) {

    var scroll, i,
            positions = [],
            here = $(window).scrollTop(),
            collection = $('.highlight1');

    collection.each(function() {
        positions.push(parseInt($(this).offset()['top'],10));
    });

    for(i = 0; i < positions.length; i++) {
        if (direction == 'next' && positions[i] > here) { scroll = collection.get(i);  break; }
        if (direction == 'prev' && i > 0 && positions[i] >= here) { scroll = collection.get(i-1); break; }
    }

    if (scroll) {
        $.scrollTo(scroll, {
            duration: 750       
        });
    }

    return false;
}

$("#next,#prev").click(function() {        
    return scroll($(this).attr('id'));        
});

});

CSS：

#nav-dock {
    position: fixed;
    right: 15px;
    top: 35%;
}
#nav-dock a {
    display: block;
    padding: 3px 10px;
    margin: 3px 0;
    background: #666;
    color: #fff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
#nav-dock a:hover {
    background: #000;
}
#nav-dock #next {
    margin-bottom: 10px;
}
4

1 回答 1

2

看起来是您正在使用的 jquery 版本。我将您的 jsfiddle 更新为 1.7.2，看起来还可以。

高温高压

于 2013-06-08T12:20:33.083 回答