我是JavaScript和jQuery的新手,在从不同页面进行页面滚动时遇到了一些问题。这项工作是在WordPress PHP中完成的。我目前正在使用页面滚动,其中href=#id,我将其更改为href=/#id,其中斜线允许正确引导。问题是我是否在主页的当前页面上。正斜杠现在是跳跃,而不是页面滚动。我的想法是让href=#id不带斜杠,并让它检查当前url是否为!=到home,然后在href后面加一个正斜杠。我们真诚地感谢您的帮助!
这允许从当前页面滚动页面,而不是直接从Pricing&服务页面
<li><a class="page-scroll" href="#howitworks">How It Works</a></li>
添加"/"允许从Pricing&然而,如果我在主页上,它会跳转。如果我不在主页上,我想让它跳起来。我希望它能在当前页面上平滑滚动。
<li><a class="page-scroll" href="/#aboutus">About Us</a></li>
我的指导页面。
<li><a class="page-scroll" href="pricing-services">Pricing & Services</a></li>
这是我正在使用的javascript代码,需要Jquery Easing插件
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top-50
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
要获取当前url,可以使用window.location.pathname
:
var path = window.location.pathname;
var add = '';
检查"home"
是否在url中。如果indexOf
没有找到任何内容,则返回-1。否则返回第一次出现的位置
if(path.indexOf("home") == -1){
add = '/';
}
然后将斜线添加到href中,如下所示:
var href = $('.page-scroll').attr('href');
$('.page-scroll').attr('href',add+href);
这个框架是用PHP编写的,所以我找到的一个快速解决方案是为某些带有正斜杠的页面使用另一个自定义页眉,而在主页上却没有。谢谢大家。我确信,如果这是在node.js中完成的,那么正确的修复方法不会是PHP方法。
您可以将所有的/#
更改为#
,并为每个页面提供一个基本标记,除了主页:
<head>
<base href='./' />
</head>
或者,删除所有/#
,使其仅为#
,并将以下JavaScript放在外部.js
页面上。
var pre = onload;
onload = function(){
var doc = document, loc = location;
if(pre)pre();
function pageHashRedirect(homePageURL){
var url = loc.protocol.replace(/:$/, '')+'://'+loc.hostname+'/'+loc.pathname.replace(/^//, '').replace(//$/, ''), bs;
if(!url.match(new RegExp('^'+homePageURL.replace(//$/, '')+'$', 'i'))){
if(!doc.getElementsByTagName('base')[0]){
bs = doc.createElement('base'); doc.getElementsByTagName('head')[0].appendChild(bs);
}
else{
bs = doc.getElementsByTagName('base')[0];
}
bs.href = './';
}
}
pageHashRedirect('homePageURLwithoutGetAndHashTag.extHERE');
}