链接锚点跳转的平滑滚动效果探究-林三在线

链接锚点跳转的平滑滚动效果探究

linsan2018-08-04 14:20learning903 views抢沙发

主题制作离不开锚点制作，它使得主题各元素之间有了某种联系，如果使用得当，还能提高用户体验。林三最近对于锚点也是了解些许，知道了平滑滚动效果的好处，非常友好。这里特别整理出来，当作笔记，也可以让更多的朋友拿去直接用吧！啥也不说，直接上代码：

JQuery实现简单的平滑过渡效果需增加如下代码到主题文件

如果是加到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内查找到的才有效果，其它位置的锚点并不会有效。