Flask - href 锚定在不同的页面（导航栏）答案

【问题标题】：Flask - href to anchor on a different page (navigation bar)Flask - href 锚定在不同的页面（导航栏）
【发布时间】：2020-11-29 12:37:16
【问题描述】：

我正在使用 Flask 开发一个网络应用程序。在主页 (index.html) 上，导航栏使用锚点导航到页面上的特定部分：

<a class='text' href='#body2'>calculate</a>

<a id="body2"></a>

在主页上，有一个表单可以将您链接到一个新页面 (output.html)。我希望相同的导航栏将用户导航到上一页 (index.html) 和特定部分。我在第二页写了导航链接，如下图：

<a class='text' href="{{ url_for('index') }}#body2">calculate</a>

当我单击导航链接时，新页面不会加载。然而，这很奇怪，当我在浏览器中检查导航链接元素并通过检查客户端单击链接时，它确实将我带到了正确的页面/部分。

如果我从上面的行中删除“#body2”，它会成功地将我导航到上一页，但不会导航到特定部分。

（如果您想实际试用 Web 应用程序上的导航链接，请使用以下链接： http://yourgreenhome.appspot.com/ - 在空白表单条目中输入一些随机值，它会将您带到第二页。它通过 Google 的 App Engine 运行，但这绝对不会导致问题，因为当我在本地主机上运行网站时问题仍然存在）。

【问题讨论】：

calculate 我已经尝试了上面的行，它我从另一个 stackoverflow 线程中找到，但这也不起作用。同样的问题：点击网站上的链接，它不会导航，但是当我检查元素并点击链接时，它确实有效。
如果我右键单击链接并在新窗口中打开，它们可以工作。但不是当我直接点击它们时。但是移除锚可以让它工作。
该问题与烧瓶无关。在smoothscroll.js 中，您正在为页面中的每个锚链接添加滚动效果。因此，当单击左上角的主页链接时，会在第二页触发动画。但是，由于该页面中不存在元素“#body”，因此动画代码会中断。您可以查看开发控制台：Cannot read property 'top' of undefined。您可能不应该在第二页加载smootscroll.js，并重新考虑第一个页面加载时的动画。这个SO question 可能会有所帮助。

标签： python html flask jinja2

【解决方案1】：

smoothscroll.js 中有错误

$(document).ready(function(){
  $("a").on('click', function(event) {
    if (this.hash !== "") {
      event.preventDefault();

      var hash = this.hash;


      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        window.location.hash = hash;
      });
    }
  });
});

在advpy 页面中，$(hash).offset() 未定义，因此top 未定义。因为您正在阻止默认事件 (event.preventDefault();)，所以不会发生对链接的点击。

【讨论】：