做网站最怕啥?页面长得像迷宫,用户找不着北。
今天咱不整那些虚头巴脑的理论。
直接上干货,告诉你网站 锚点链接怎么做,才能既专业又好用。
很多新手兄弟,做内页导航或者长文章目录,总喜欢搞一堆花里胡哨的JS插件。
结果呢?加载慢,还容易出bug,用户体验极差。
其实,最原始的方法,往往是最管用的。
咱今天就用最纯的HTML代码,把这个事儿掰扯清楚。
你只需要记住两个核心动作:打标记,和连起来。
第一步,给你的目标位置打个“桩”。
假设你文章里有个章节叫“产品优势”,你想让用户点击目录直接跳过去。
在那个标题的HTML代码里,加个id属性就行。
比如:
注意啊,id的名字最好用英文,别整中文,有些老服务器解析起来容易乱码。
也别用数字开头,虽然现代浏览器支持,但为了稳妥,还是字母开头最靠谱。
这步做完了,你的页面就有了一个隐形的“坐标点”。
第二步,写那个能点的链接。
在目录或者其他地方,写个普通的超链接。
href后面,别写具体的网址,而是写个井号,加上刚才那个id的名字。
比如:点击查看产品优势
就这么简单,别想复杂了。
这里头有个坑,很多人喜欢在href里写全路径,比如href="page.html#advantage"。
如果你是在同一个页面内跳转,千万别这么干。
加了文件名,浏览器可能会刷新页面,导致滚动效果没了,或者定位不准。
直接写#advantage,这才是纯正的锚点写法。
第三步,让跳转丝滑一点。
现在的用户没耐心,你“啪”一下跳过去,容易把人吓一跳。
加个CSS样式,让滚动变得平滑。
在