[英]Flask - href to anchor on a different page (navigation bar)
我正在使用 Flask 开发 web 应用程序。 在主页 (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/ - 在空白表单条目中输入一些随机值,它将带您到第二页.它是通过谷歌的App Engine运行的,但这绝对不会导致问题,因为当我在本地主机上运行该站点时问题仍然存在)。
你在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();
),所以不会发生对链接的点击。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.