[英]One Page website hashbang navigation scrolling
I planning to do SEO optimisation for my One Page Website. 我打算为我的一页网站进行SEO优化。 I have one difficult thing to do, which is scrolling feature working with hashbang.
我有一件困难的事情要做,那就是使用hashbang的滚动功能。 When i click on url from navigation, there is smooth scroll to section on that page.
当我从导航中单击url时,可以平滑滚动到该页面上的部分。
<ul class="navigation" id="menu">
<li>
<a href="#personal-profile">Personal Details</a>
</li>
<li>
<a href="#work-experience">Experience</a>
</li>
<li>
<a href="#education">Education</a>
</li>
<li>
<a href="#skills">Skills</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
And this function i use for smooth scrolling: 我使用此功能可以平滑滚动:
function handleSmoothScrolling() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
console.log(target.offset());
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 500);
return false;
}
}
});
}
Everything fine when i use default urls, but when im changing 当我使用默认网址时一切都很好,但是当我更改时
<a href="#work-experience">Experience</a> to <a href="#!work-experience">Experience</a>
And the id of the section div to id="!work-experience" , the website is not scrolling, and web browser trying to load a non existing url. 并且div部分的id为id =“!work-experience”,网站没有滚动,并且Web浏览器尝试加载不存在的URL。
You should use .htaccess or your servers equivalent to take care of the location change of #! 您应该使用.htaccess或等效的服务器来处理#!的位置更改。 to #, or better yet, assuming by the !# that you're using AngularJS, enable HTML5mode.
到#,或者更好的是,假设您正在使用AngularJS,请启用!#,启用HTML5mode。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.