I wanna set "autoscroll to class" jquery script in that way so it shows targeted class couple of pixels in offset from top of the window. Is something like that possible with this plugin?
jsfiddle: http://jsfiddle.net/dzorz/cybMJ/
html:
<div id="nav-dock">
<a id="prev" href="#">↑ Prev</a>
<a id="next" href="#">↓ Next</a>
</div>
<br><br><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. Pellentesque volutpat facilisis porttitor. Nullam in
turpis a nulla placerat placerat.
</div>
<br><br><br><br><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><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><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>
script:
$(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'));
}).triggerHandler('click');
$(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'));
}).triggerHandler('click');
});
You can update my jsfiddle freely.