admin 发表于 2022-6-8 07:16:45

【JQuery】锚的应用让页面跳转到指定位置

点击当前页面一个链接,直接跳转到链接页面的某个指定位置,而不是顶部怎么办?

首先在链接页面批定位置处制作锚点,增加:id="anchor"
然后在当前页面链接href尾部增加#anchor

这样就实现页面跳转并滚动到锚点位置。
实际案例模板:dxxz页面case

更有趣的设计:
上述方法,是#anchor顶部对齐浏览器上部边框,这会导致,当#anchor的边距不够大时,显示内容顶在上部边框下面,没有边距感,导致设计不好看。
这时,我们可以将<div id="anchor"></div>作为隐藏单位占据空间位,利用CSS定位,将其设在指定位置。
如下案例:
#anchor{
    position: relative;
    top: -62px;
}

这种设计,就是多显示anchor上方62px内容,如果上方是整屏图片,显示也更为漂亮,也可以结合上部内容特点,定制更有趣的艺术设计效果。
实际案例模板:dxxz页面list+us_3

页: [1]
查看完整版本: 【JQuery】锚的应用让页面跳转到指定位置