[英]jQuery scroll to a section in another page
I'm trying to create a new script with the jQuery library to scroll to a specific id on a page but I have two problems: 我正在尝试使用jQuery库创建一个新脚本以滚动到页面上的特定ID,但是我有两个问题:
I can't delete the href
content in the address bar. 我无法删除地址栏中的
href
内容。 For example, my link scrolls to a section block with the id anchor-link-section
and in my link I have href = "index.php#anchor-link-section"
. 例如,我的链接滚动到ID为
anchor-link-section
的节块,而我的链接中具有href = "index.php#anchor-link-section"
。 However, in my address bar I see www.site.com/index.php#anchor-link-section...
. 但是,在我的地址栏中,我看到
www.site.com/index.php#anchor-link-section...
How can I take it off? 我该如何取下?
If I'm already on the page where my id is section-scroll
, and my href
is href="index.php#section-scroll"
, the page does not scroll, it reloads, to put www.site.com/index.php#section-scroll
in my address bar, and then scroll to my id 如果我已经在我的ID是
section-scroll
的页面上,而我的href
是href="index.php#section-scroll"
,则该页面不会滚动,它会重新加载以放入www.site.com/index.php#section-scroll
在我的地址栏中,然后滚动到我的ID
I am using jQuery 3.3.1 and jQuery UI 1.12.0. 我正在使用jQuery 3.3.1和jQuery UI 1.12.0。 I use a url rewriting technology (ex: www.site.com/index)
我使用网址重写技术(例如:www.site.com/index)
I have already tried the following: 我已经尝试了以下方法:
$(document).ready(function() {
$('html, body').hide();
if (window.location.hash) {
setTimeout(function() {
$('html, body').scrollTop(0).show();
$('html, body').animate({
scrollTop: $(window.location.hash).offset().top
}, 1000)
}, 0);
}
else {
$('html, body').show();
}
});
I don't have a scroll animation, I can't scroll to an id from on a page without having to modify my address bar... 我没有滚动动画,无法在不修改地址栏的情况下从页面上滚动到ID。
I updated my code as per suggested by jom: 我按照jom的建议更新了代码:
$(document).ready(function() {
$('html, body').hide();
if $(window.location.hash'a[href$="index#lien-ancre-commu"]') {
setTimeout.click(function (e) {
$('html, body').scrollTop(0) e.showpreventDefault();
$('html, body').animate({
scrollTop: $(window.locationthis.hash).offset().top
}, 1000)
}, 01000);
} else {
$('html, body').show();
})
});
But now I no longer have scroll animation but the switch between pages works. 但是现在我不再具有滚动动画,而是可以在页面之间进行切换了。
Nav menu code html : 导航菜单代码html:
<ul class="nav navbar-nav navbar-right">
<li><a href="">Accueil</a>
</li>
<li><a href="/index.php#lien-ancre-commu">Communauté</a>
</li>
<li><a href="/index.php#lien-ancre-contact">Contact</a>
</li>
<li><a href="commu">Médias</a>
</li>
<li class="dropdown"><a class="fas fa-angle-down" data-toggle="dropdown">Plus</a>
<ul class="dropdown-menu">
<a href="commu">Admin</a>
</ul>
</li>
</ul>
A simple Event.preventDefault()
should do the trick. 一个简单的
Event.preventDefault()
应该可以解决问题。 By doing this, you won't have to deal with removing the hash part of the URL in address bar — it simply will never get appended in there. 这样,您就不必处理在地址栏中删除URL的哈希部分的问题-它永远不会被追加到该地址栏中。
$(document).ready(function (e) {
if (window.location.hash) {
scrollToSection(window.location.hash);
}
});
$('a[href$="#lien-ancre-commu"]').click(function (e) {
// Tells the browser not to mess with our links or anchor tags
e.preventDefault();
// Because we are redefining how it should behave...
if (this.pathname === window.location.pathname) {
// ...that is to scroll to a section of the page
// IF we are on the intended page
scrollToSection(this.hash);
}
else {
// Otherwise, redirect them to the page
window.location.replace(this.href);
}
});
function scrollToSection(id) {
$('html, body').animate({
scrollTop: $(id).offset().top
}, 1000);
}
And with all those in place, you will have your links/anchor tags in the following format: 在所有这些位置上,您将使用以下格式的链接/锚标签:
<a href="/index.php#lien-ancre-commu">Scroll to section</a>
Notice the forward slash character ( /
), we will need this because adding it means we are redirecting to a URL relative to our application base path instead of another routes relative to current path. 请注意正斜杠字符(
/
),我们将需要它,因为添加它意味着我们将重定向到相对于应用程序基本路径的URL ,而不是相对于当前路径的其他路由。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.