a標簽是前端必用之一，但是a標簽點擊后馬上跳到了href屬性值處，有時候要達到滑動效果就要自己添加JavaScript

普通的a標簽代碼寫好之后，在js腳本內加上

    $("html, body").animate({scrollTop: $($(this).attr("href")).offset().top -20+ "px"}, 500);

    return false;//不要這句會有點卡頓

});

（注意：$表達式需要引用jQuery的js文件才能生效?。。。。?/h3>

其中offset() 方法返回或設置匹配元素的left或者top的頁面偏移量（getBoundingClientRect()放回當前窗口的偏移量），具體用法可以到W3School或菜鳥教程看看;

$(this).attr("href")是獲取你所點擊的a標簽里面的href屬性值。

(this).attr("href")).offset().top 是獲取id等于$(this).attr("href")塊所在的位置，比如點擊<a href="a1">時，就會獲取到id="a1" 的塊的位置，這里的-20只是讓滑動到的塊下移20px，使其更加靠近屏幕中間，讓a標簽跟加好用。

scrollTop是滑動動作，比如scrollTop: 50px 就是滑動到html距離頂部的50px高處。

animate是動作函數(shù)，提供scrollTop等動作，500則是指animate所提供的動作在500毫秒內完成，這里就是指滑動0.5秒。

$("a").click(function (){ }）指a標簽被點擊是觸發(fā){ } 內的事件，所以也可以把a標簽改成自定義標簽，然后就可以實現(xiàn)一個頁面既有普通a標簽，也有可以滑動的標簽。

---

作者：chance_66
來源：CSDN
原文：https://blog.csdn.net/never_tears/article/details/53377123
版權聲明：本文為博主原創(chuàng)文章，轉載請附上博文鏈接！