在同一个页面链接到指定位置最简单的方法就是在url加#ID。
今天介绍一个jquery插件不用#ID的方式,可以顺畅的滚动到指定位置。
用法很简单
引用js文件
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script> !window.jQuery && document.write(unescape('%3Cscript src="lib/jquery/jquery.js"%3E%3C/script%3E'));</script>
<script src="src/jquery.smooth-scroll.js"></script>
JS代码
$(document).ready(function () {
$('ul.mainnav a').smoothScroll();
$('p.subnav a').click(function (event) {
event.preventDefault();
var link = this;
$.smoothScroll({
scrollTarget: link.hash
});
});
$('#change-speed').on('click', function () {
var $p1 = $('ul.mainnav a').first(),
p1Opts = $p1.smoothScroll('options') || {};
p1Opts.speed = p1Opts.speed === 1400 ? 400 : 1400;
$p1.smoothScroll('options', p1Opts);
});
$('button.scrollsomething').click(function () {
$.smoothScroll({
scrollElement: $('div.scrollme'),
scrollTarget: '#findme'
});
return false;
});
$('button.scrollhorz').click(function () {
$.smoothScroll({
direction: 'left',
scrollElement: $('div.scrollme'),
scrollTarget: '.horiz'
});
return false;
});
});