[英]jQuery easing library - Uncaught Error: Syntax error, unrecognized expression
I am trying to use http://gsgd.co.uk/sandbox/jquery/easing library in my single page app to navigate to different section of my page with smooth scrolling effect.我正在尝试在我的单页应用程序中使用http://gsgd.co.uk/sandbox/jquery/easing库以平滑滚动效果导航到页面的不同部分。
When I use the following html markup:当我使用以下 html 标记时:
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link page-scroll" href="#home">HOME <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#page1">PAGE 1</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#page2">PAGE 2</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#page3">PAGE 3</a>
</li>
</ul>
along with this javascript:连同这个 javascript:
$(function() {
$(document).on('click', 'a.page-scroll', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 600, 'easeInOutExpo');
event.preventDefault();
});
});
This works exactly as expected.这完全符合预期。 However, my nav is shared with other page (eg contact us), which is not on the single page, so I updated my nav like this:
但是,我的导航与不在单个页面上的其他页面(例如联系我们)共享,所以我像这样更新了我的导航:
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link page-scroll" href="/#home">HOME <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="/#page1">PAGE 1</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="/#page2">PAGE 2</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="/#page3">PAGE 3</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="/contact-us">Contact Us</a>
</li>
</ul>
When I did this;当我这样做时; I started to get this error:
我开始收到此错误:
Uncaught Error: Syntax error, unrecognized expression: http://example.com/#page1
未捕获的错误:语法错误,无法识别的表达式: http://example.com/#page1
I tried updating my javascript like this;我尝试像这样更新我的 javascript;
$(function() {
$(document).on('click', 'a.page-scroll', function(event) {
$('html, body').stop().animate({
scrollTop: $($(location).attr('hash')).offset().top
}, 600, 'easeInOutExpo');
event.preventDefault();
});
});
This does not help.这无济于事。 However, what's strange is;
然而,奇怪的是; when I run this in the chrome console:
当我在 chrome 控制台中运行它时:
$($(location).attr('hash')).offset().top
This works and I am seeing float value.这有效,我看到了浮点值。
Any idea what might be wrong?知道可能出了什么问题吗?
I found a way to fix this like so:我找到了一种方法来解决这个问题:
$(function() {
$(document).on('click', 'a.page-scroll', function(event) {
var $anchor = $(this);
var targetUrl = $anchor.attr('href');
var hash = targetUrl.split('#')[1];
var targetDiv = $('#' + hash);
if (targetDiv && targetDiv.length > 0) {
event.preventDefault();
$('html, body').stop().animate({
scrollTop: targetDiv.offset().top
}, 600, 'easeInOutExpo');
}
});
});
this might not be the right approach, but it's working for me.这可能不是正确的方法,但它对我有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.