平滑滚动Javascript可以工作，但会弄乱flask应用程序

我正在开发一个flask应用程序，在我的index.html中有一个js文件，里面有一个平滑的滚动脚本。平滑卷轴的工作原理是点击链接，页面进入该部分时非常平滑，但是我有一个web表单，我正试图用flask处理它。当我运行app.py并转到url时，它会加载我的站点，但如果我填写表单并提交，则不会发生任何事情。我在开发人员控制台中遇到错误：

uncaught TypeError: Cannot read property 'top' of undefined
    at HTMLInputElement.<anonymous> (main.js:33)
    at HTMLInputElement.dispatch (jquery-3.4.1.min.js:2)
    at HTMLInputElement.v.handle (jquery-3.4.1.min.js:2)

main.js

//init and add the map
function initMap() {
  // your location
  const loc = { lat: 42.964890, lng: -88.183040 };
  // centered map on location
  const map = new google.maps.Map(document.querySelector('.map')
    , {
      zoom: 10,
      center: loc
    });
  // the marker, positioned at location
  const marker = new google.maps.Marker({ position: loc, map: map });

}
// Sticky menu background
window.addEventListener('scroll', function () {
  if (window.scrollY > 150) {
    document.querySelector('#navbar').style.opacity = 0.88;
  } else {
    document.querySelector('#navbar').style.opacity = 1;

  }
})
// Smooth Scrolling
$('#navbar a, .btn').on('click', function (event) {
  if (this.hash !== '') {
    event.preventDefault();

    const hash = this.hash;

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

---

这个问题实际上与jquery论坛有关，而不是来自flask。然而，它们是解决办法：

解决方案#1：

使用本机css平滑滚动（在我看来，在您的情况下效果很好）-->

解决方案#2：

尝试在网站控制台中调用animate（），并将其粘贴到结果下方，以查看问题的来源：）

---

我希望这将有助于你我在我的电脑上尝试，我可以想出任何其他的解决方案

您的

点击事件中有一行
this.hash
，该事件将始终返回
”
，这就是您收到错误的原因，因为您在绑定点击事件的链接和按钮的
href
属性中有hash/id

<ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#what">What</a></li>
    <li><a href="#who">Who</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>
<input type="submit" value="Submit" class="btn btn-dark">
<a href="#what" class="btn">Read More</a>

到

或

您的单击事件应该如下所示

// Smooth Scrolling
$('#navbar a, .btn').on('click', function (event) {
  if (this.href !== '') {
    event.preventDefault();

    const hash = this.href;

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

好吧，我删除了smooth scroll js代码，添加了smooth scroll css，看起来效果不错。谢谢，我还是想弄明白为什么剧本会破坏一切。再说一次，就滚动而言，它确实有效，只是因为某种原因，它扰乱了表单的功能。那么你的问题解决了吗？如果是的话，我的答案是“最好的答案”，因为它可以帮助很多有相同问题的人。好吧，所以我尝试了这个，但最后我又出现了一些错误，链接不再有效。错误是：uncaughterror:Syntax error，无法识别的表达式：@adamg您可以显示您在控制台中得到的确切错误字符串吗，它指向的是哪一行号
//init and add the map
function initMap() {
  // your location
  const loc = { lat: 42.964890, lng: -88.183040 };
  // centered map on location
  const map = new google.maps.Map(document.querySelector('.map')
    , {
      zoom: 10,
      center: loc
    });
  // the marker, positioned at location
  const marker = new google.maps.Marker({ position: loc, map: map });

}
// Sticky menu background
window.addEventListener('scroll', function () {
  if (window.scrollY > 150) {
    document.querySelector('#navbar').style.opacity = 0.88;
  } else {
    document.querySelector('#navbar').style.opacity = 1;

  }
})
// Smooth Scrolling
$('#navbar a, .btn').on('click', function (event) {
  if (this.hash !== '') {
    event.preventDefault();

    const hash = this.hash;

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

<ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#what">What</a></li>
    <li><a href="#who">Who</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>
<input type="submit" value="Submit" class="btn btn-dark">
<a href="#what" class="btn">Read More</a>

this.hash

$(this).attr('href')

this.href

// Smooth Scrolling
$('#navbar a, .btn').on('click', function (event) {
  if (this.href !== '') {
    event.preventDefault();

    const hash = this.href;

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