我正在尝试链接到 concrete5 中的另一页的部分,但无法使其工作。当我悬停在链接上时,正确的地址将出现在窗口的左下方(Chrome)。但是,当我单击链接时,什么也不会发生(地址栏中没有任何文本,页面上没有任何更改)。
我的教授似乎认为这是我的JS文件中的一个问题,因为我遇到了未定义的"顶级"属性错误。
我的链接:
<a href="<?=$this->url('programs');?>#delinquencyprogram">Delinquency Intervention + Prevention</a>
所需的最终位置:
http://maysp.tylerhalldesigns.com/index.php/programs#delinquencyprogram
锚点:
<hr id="delinquencyprogram" class="anchor">
jQuery:
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash,
nav = $('nav');
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
if (nav.height) {
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
}
} // End if
});
});
我对jQuery/js有一个非常初学者的理解,不确定我是否需要为NAV创建一个VAR,或者确切的IF(nav.length)snippet正在完成(我理解的方式是确定它的方式如果我跳到的对象有内容)。
开发人员工具中的错误:
Uncaught TypeError: Cannot read property 'top' of undefined
at HTMLAnchorElement.<anonymous> (maysp.js:79)
at HTMLAnchorElement.dispatch (jquery.js:4)
at HTMLAnchorElement.r.handle (jquery.js:4)
如果需要更多信息,我很乐意提供。
可以在此处看到该网站:http://maysp.tylerhalldesigns.com/index.php
这是该主页上需要链接到程序页面的明亮彩色按钮。使用NAV(程序>成功)链接时,我也有同样的问题。
谢谢!
我向一位同事提供帮助,他建议完全删除JS平滑滚动代码,以查看锚点是否在没有它的情况下工作。他们做到了,所以我删除了当前的代码,并用以下内容替换了:
$(document).ready(function(){
$('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) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 800);
return false;
}
}
});
});
这将平滑的滚动效果应用于页面上的每个链接。
我希望这对我像我一样被困的几天都会有帮助!