我是一个JavaScript和jQuery newby,并且有一些问题,页面滚动是从不同的页面引导的。这项工作是在WordPress PHP中完成的。我目前正在使用页面滚动,其中href = #id并且我将其更改为href = / #id,其中斜杠允许正确指向。问题是如果我在家的当前页面上。正斜杠现在跳转而不是页面滚动。我的想法是保留href = #id而不使用斜杠,并检查当前url!= home,然后向href附加正斜杠。真的很感激帮助!
这允许从当前页面滚动页面,而不是直接来自定价&服务页面
<li><a class="page-scroll" href="#howitworks">How It Works</a></li>
添加&#34; /&#34;允许从定价&amp;如果我在主页上,服务页面会跳转。如果我不在主页上,我希望它跳。我希望它能够在当前页面上平滑滚动。
<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();
});
});
答案 0 :(得分:1)
要获取当前网址,您可以使用window.location.pathname
:
var path = window.location.pathname;
var add = '';
检查"home"
是否在网址中。 indexOf
如果找不到任何内容则返回-1。否则它会返回第一次出现的位置
if(path.indexOf("home") == -1){
add = '/';
}
然后将斜杠添加到href,如下所示:
var href = $('.page-scroll').attr('href');
$('.page-scroll').attr('href',add+href);
答案 1 :(得分:0)
您可以将所有/#
更改为#
,并在主页旁边为每个页面添加基本标记:
<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');
}
答案 2 :(得分:0)
这个框架是用PHP编写的,所以我发现一个快速修复方法是对某些具有正斜杠的页面使用另一个自定义标题,而在没有它的主页上使用。谢谢你们。我确定如果这是在node.js中完成的,那么正确的修复不会是PHP方法。