在新页面中跳转到指定 div容器位置

阿酷tony

于 2024-05-10 19:31:37 发布

阅读量287

点赞数 1

分类专栏：文章存档文章标签：页面跳转 div容器

本文链接：https://blog.csdn.net/ffffffff8/article/details/138678627

版权

文章存档专栏收录该内容

196 篇文章 2 订阅

订阅专栏

要在打开新的页面时跳转到指定 div，我们需要结合 HTML、JavaScript 和后端技术来实现。以下是两种常见的方法：

使用 URL 参数传递目标 div 信息

HTML (新页面):
- 在新页面的链接中，添加参数来指示目标 div 的 id，例如：
```
<a href="new_page.html?targetDiv=div3">打开新页面并跳转到 div3</a>
```

JavaScript (新页面):

在新页面中，使用 JavaScript 获取 URL 参数中的目标 div id。
使用 jQuery 的 animate 方法滚动到目标 div 的位置。

$(document).ready(function() {
  // 获取 URL 参数
  const urlParams = new URLSearchParams(window.location.search);
  const targetDivId = urlParams.get('targetDiv');

  if (targetDivId) {
    // 滚动到目标 div
    const targetOffset = $(`#${targetDivId}`).offset().top;
    $("html, body").animate({scrollTop: targetOffset}, 500);
  }
});