Django项目中小屏设备href锚点导航失效问题求助

嘿，我看你遇到了移动端和平板端锚点导航只改URL不滚动的问题，这大概率是页面里重复的ID在搞鬼！咱们来拆解问题根源，再给出几种可行的解决方案。

问题根源 #

你现在的代码里，PC端和移动端的锚点目标元素用了完全相同的id="{{faq.question}}"，但这两个元素是分开渲染的：

• PC端显示的是带有w3-hide-small w3-hide-medium类的容器里的元素
• 移动端显示的是带有w3-hide-large类的容器里的元素

浏览器解析锚点时，只会定位到第一个匹配ID的元素。在移动端，第一个匹配的元素是被w3-hide-small w3-hide-medium隐藏的PC端元素，所以浏览器会滚动到那个隐藏元素的位置，看起来就像没有滚动效果一样。

解决方案 #

方案1：统一锚点目标（推荐） #

最干净的做法是去掉重复的DOM渲染，用响应式CSS控制同一个元素的样式，避免ID重复。

修改锚点目标代码

把两个分开的容器合并成一个，用CSS媒体查询替代w3的hide类：

<div class="faq-content">
  {% for faq in question_list %}
  <div class="w3-card-4" id="{{faq.question}}">
    <h3 class="w3-container w3-blue">{{faq.question}}</h3>
    <div class="w3-container">
      {{faq.answer}}
    </div>
  </div>
  {% endfor %}
</div>

添加自定义CSS

根据w3.css的断点（w3-hide-large对应屏幕宽度≤992px），添加媒体查询控制宽度：

/* PC端（屏幕宽度>992px） */
@media (min-width: 993px) {
  .faq-content {
    width: calc(100% - 300px);
  }
}

/* 移动端和平板端（屏幕宽度≤992px） */
@media (max-width: 992px) {
  .faq-content {
    width: 100%;
  }
}

这样只需要一组锚点目标元素，ID唯一，浏览器就能正确定位到可见的元素了。

方案2：给移动端锚点设置独立ID #

如果不想修改太多结构，可以给移动端的锚点目标设置独特的ID，让移动端菜单指向对应的ID。

修改移动端菜单代码

把small-menu里的href改成带前缀的ID：

{% block small-menu %}
{% for faq in question_list %}
<a href="#mobile-{{faq.question}}" class="w3-button w3-bar-item w3-hover-text-blue">{{faq.question}}</a>
{% endfor %}
{% endblock %}

修改移动端锚点目标代码

给移动端的元素添加带前缀的ID：

<div class="w3-hide-large">
  {% for faq in question_list %}
  <div class="w3-card-4" id="mobile-{{faq.question}}">
    <h3 class="w3-container w3-blue">{{faq.question}}</h3>
    <div class="w3-container">
      {{faq.answer}}
    </div>
  </div>
  {% endfor %}
</div>

方案3：用JavaScript手动控制滚动 #

如果不想修改HTML结构，可以用JavaScript拦截移动端菜单的点击事件，手动定位到可见的目标元素。

给移动端菜单添加类

先给small-menu里的a标签加一个标识类：

{% block small-menu %}
{% for faq in question_list %}
<a href="#{{faq.question}}" class="mobile-anchor w3-button w3-bar-item w3-hover-text-blue">{{faq.question}}</a>
{% endfor %}
{% endblock %}

添加JavaScript脚本

在页面底部添加脚本处理点击：

// 监听移动端锚点点击
document.querySelectorAll('.mobile-anchor').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认的锚点跳转行为
    const targetId = this.getAttribute('href').slice(1); // 获取ID部分
    
    // 找到当前可见的目标元素（排除被w3-hide-large隐藏的元素）
    const visibleTarget = document.querySelector(`#${targetId}.w3-card-4:not(.w3-hide-large)`);
    
    if (visibleTarget) {
      // 滚动到目标元素位置，可选smooth实现平滑滚动
      visibleTarget.scrollIntoView({ behavior: 'smooth', block: 'start' });
      // 更新URL地址
      window.history.pushState({}, '', this.getAttribute('href'));
    }
  });
});

总结 #

优先推荐方案1，它能减少冗余代码，让DOM结构更简洁，也从根源上避免了ID重复的问题。如果暂时不想重构DOM，可以选择方案2或3快速解决问题。

内容的提问来源于stack exchange，提问作者Vítek Peterka