在有人发表评论之前,已经多次询问过这个问题,是的,但是,无论我找到的解决方案都没有找到我需要的工作。
我有这样的导航:
link 1 (/link1/)
- sub link 1 (/link1/#sublink1)
- sub link 2 (/link1/#sublink2)
link 2
- sub link 1 (/link2/#sublink1)
- sub link 2 (/link2/#sublink2)
顶级链接链接到网站上的其他页面,子级别链接是该页面内部分的锚点。我试图在用户所在的页面上单击子链接时,以及在单击另一个页面的子链接时(浏览器应加载其他页面然后向下滚动)时,平滑滚动到某个部分。目前我只能得到一个或另一个工作 - 而不是两个。
方法1 (在点击其他页面上的子链接时有效 - 浏览器加载另一个页面然后向下滚动,但在用户已经在的页面的子链接上不起作用)
jQuery('body, html').animate({
scrollTop: jQuery(window.location.hash).offset().top
}, 1300)
方法2 (与方法1完全相反) //确保this.hash在覆盖默认行为之前有一个值
if (this.hash !== "") {
// Store hash
var hash = window.location.hash;
// 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
jQuery('html, body').animate({
scrollTop: $(hash).offset().top
}, 1300, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
我基本上需要将这两种方法结合起来,以便平滑滚动在所有情况下都能正常工作,但我不知所措!有什么想法吗?
答案 0 :(得分:1)
原来我必须做这样的事情:
var hash = window.location.hash;
var cleanHash = hash.replace("-st", "");
var currPath = window.location.pathname;
if (hash !== null && hash !== '')
jQuery('body, html').animate({
scrollTop: jQuery(cleanHash).offset().top
}, 1300);
$("a").on('click', function(e) {
e.preventDefault();
var linkPath = $(this)[0].pathname;
var href = $(this).attr('href');
var linkHash = href.substr(href.indexOf("#"));
var cleanLinkHash = linkHash.replace("-st", "");
if(linkPath !== currPath){
window.location.href = href;
} else {
$('html, body').animate({
scrollTop: $(cleanLinkHash).offset().top
}, 800, function(){
window.location.hash = cleanLinkHash;
});
}
});
它很漂亮,需要改进,但它适用于我的情况。重要的部分是检查链接的路径是否等于当前页面,然后使用不同的滚动方法。
答案 1 :(得分:1)
我会这样做
x <- c(-1, 0, 1, 2, 3)
replace(x, x < 1,1)
# [1] 1 1 1 2 3