页面内跳转到相应位置的3种方法

2023-04-07 06:57| 来源: 网络整理| 查看: 265

首先设置所需的css和html

设置css

.demo{ width: 200px; height: 200px; border: 1px red solid; margin-bottom: 100px; margin-right: 50px; } .btn{ position: fixed; right: 0; top: 20px; background-color: #0000cc; color: #ffffff; }

设置html

这个DIV，id是demo

重点来了

1.第一种方法直接在html中添加

跳到id为demo的DIV

　　使用a标签跳转到相应id的位置

2.第二种方法先在html中添加

　　再添加js代码

function onTopClick() { window.location.hash = "#domo"; }

　　由于btn没有herf跳转功能，这里我们用hash（锚链接）跳到当前页面的位置

3.第三种方法先在html中添加

到指定滚动高度

　　再添加js代码

$(document).on('click',$('.btn'),function(){ $(window).scrollTop($('#demo').offset().top) })

　　这里我是通过先得到id为demo的div距离文档顶部的距离，再使页面滚动到这个高度来达到目的。

【本文地址】

页面内跳转到相应位置的3种方法

页面内跳转到相应位置的3种方法

今日新闻

推荐新闻