如何實(shí)現(xiàn)網(wǎng)站錨點(diǎn)鏈接平滑滾動(dòng)發(fā)布者:本站 時(shí)間:2020-05-12 15:05:42
做錨點(diǎn)鏈接的方法
①:設(shè)置一個(gè)錨點(diǎn)鏈接<a href="#miao">去找喵星人</a>;(注意:href屬性的屬性值最前面要加#)
②:在頁面中需要的位置設(shè)置錨點(diǎn)<a name="miao"></a>;(注意:a標(biāo)簽中要寫一個(gè)name屬性,屬性值要與①中的href的屬性值一樣,不加#)標(biāo)簽中按需填寫必要的文字,一般不寫內(nèi)容。
錨點(diǎn)鏈接平滑滾動(dòng)
一般使用錨點(diǎn)來跳轉(zhuǎn)到頁面指定位置的時(shí)候,會生硬地立即跳轉(zhuǎn)到指定位置,但是有些時(shí)候我們想要平滑地過渡到指定的位置,那么可以使用JQuery簡單的實(shí)現(xiàn)平滑滾動(dòng)效果。
只需要在網(wǎng)站的底部代碼</body>上面添加以下的代碼就可以了。
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript"> $(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>
選擇我們,優(yōu)質(zhì)服務(wù),不容錯(cuò)過
1. 優(yōu)秀的網(wǎng)絡(luò)資源,強(qiáng)大的網(wǎng)站優(yōu)化技術(shù),穩(wěn)定的網(wǎng)站和速度保證
2. 15年上海網(wǎng)站建設(shè)經(jīng)驗(yàn),優(yōu)秀的技術(shù)和設(shè)計(jì)水平,更放心
3. 全程省心服務(wù),不必?fù)?dān)心自己不懂網(wǎng)絡(luò),更省心。
------------------------------------------------------------
24小時(shí)聯(lián)系電話:021-58370032