主题制作离不开锚点制作,它使得主题各元素之间有了某种联系,如果使用得当,还能提高用户体验。林三最近对于锚点也是了解些许,知道了平滑滚动效果的好处,非常友好。这里特别整理出来,当作笔记,也可以让更多的朋友拿去直接用吧!啥也不说,直接上代码:
JQuery实现简单的平滑过渡效果需增加如下代码到主题文件
- <script type=“text/JavaScript”>
- $(document).ready(function() {
- var $root = $(‘html, body’); //选择器缓存起来。这样每次点击时就不需要再重新查找了
- $(‘a’).click(function() {
- var href = $.attr(this, ‘href’);
- $root.animate({
- scrollTop: $(href).offset().top
- }, 500, function () {
- window.location.hash = href;
- });
- return false;
- });
- });
- </script>
如果是加到js里面则不需要外部的</script>标签哟!下面是改进版,好处是点击锚点链接平滑滚动到锚点,并且浏览器URL后缀不带有锚点字样,用户体验的时候会觉得更加自然:
- <script type=“text/JavaScript”>
- $(document).ready(function() {
- $(‘a[href*=#],area[href*=#]’).click(function() {
- if (location.pathname.replace(/^\//, ”) == this.pathname.replace(/^\//, ”) && location.hostname == this.hostname) {
- var $target = $(this.hash);
- $target = $target.length && $target || $(‘[name=’ + this.hash.slice(1) + ‘]’);
- if ($target.length) {
- var targetOffset = $target.offset().top;
- $(‘html,body’).animate({
- scrollTop: targetOffset
- },
- 1000);
- return false;
- }
- }
- });
- });
- </script>
这个是通用版本,使用后所有的锚点链接都会有平滑滚动的效果。1000是滚动的速度,单位是毫秒,如果要设置锚点与浏览器顶部的绝对距离,可以在 offset().top; 改成 offset().top -10; 意思是距离顶端10px的相对位置。另外,像林三这样的,有很多不同锚点的主题,就需要限定:
// 在id是main-wrap的元素中查找a或area,并且他们的href包括#$(“#main-wrap”).find(‘a[href*=#],area[href*=#]’).click(function()
红色部分是新增的代码,表在这个id内查找到的才有效果,其它位置的锚点并不会有效。
链接锚点跳转的平滑滚动效果探究:等您坐沙发呢!