jQuery滚动到锚点（减去设定的像素数量）
我使用以下代码使用jQuery滚动到锚点：
$(document).ready(function() { function filterPath(string) { return string .replace(/^\//,'') .replace(/(index|default).[a-zA-Z]{3,4}$/,'') .replace(/\/$/,''); } var locationPath = filterPath(location.pathname); var scrollElem = scrollableElement('html', 'body'); $('a[href*=#]').each(function() { var thisPath = filterPath(this.pathname) || locationPath; if ( locationPath == thisPath && (location.hostname == this.hostname || !this.hostname) && this.hash.replace(/#/,'') ) { var $target = $(this.hash), target = this.hash; if (target) { var targetOffset = $target.offset().top; $(this).click(function(event) { event.preventDefault(); $(scrollElem).animate({scrollTop: targetOffset}, 400, function() { location.hash = target; }); }); } } }); // use the first element that is "scrollable" function scrollableElement(els) { for (var i = 0, argLength = arguments.length; i 0) { return el; } else { $scrollElement.scrollTop(1); var isScrollable = $scrollElement.scrollTop()> 0; $scrollElement.scrollTop(0); if (isScrollable) { return el; } } } return []; } }); 反正有没有让它滚动到那个锚点但减去一定数量的像素？ （在我的情况下，我希望它去-92px）
谢谢你的帮助。
我必须自己解决这个问题。 您需要根据要滚动的像素数量来调整偏移量。 就我而言，我需要它在页面上高出50个像素。 所以，我从targetOffset中减去了50。
现在，为你摇摆不定的代码部分是location.hash – 这告诉浏览器将其位置设置为特定点。 在所有情况下，这是一个包含您刚刚滚动到的ID的字符串。 所以，它就像’#foo’。 你需要保持这个，所以我们会留下它。
但是，为了防止浏览器在设置location.hash（默认浏览器操作）时“跳转”，您只需要阻止默认操作。 因此，通过animate函数中的完成函数传递事件“e”。 然后只需调用e.preventDefault（）。 您必须确保浏览器实际上正在调用一个事件，否则它将会出错。 因此，if-test修复了这个问题。
完成。 这是修改后的代码块：
if (target) { var targetOffset = $target.offset().top - 50; $(this).click(function(event) { if(event != 'undefined') { event.preventDefault();} $(scrollElem).animate({scrollTop: targetOffset}, 400, function(e) { e.preventDefault(); location.hash = target; }); }); }
这是我用的：
function scrollToDiv(element){ element = element.replace("link", ""); $('html,body').unbind().animate({scrollTop: $(element).offset().top-50},'slow'); };
…其中50是要加/减的像素数。
此代码适用于我在我的网站中的任何链接锚点尊重“150px”高度的顶部修复菜单。
大声笑）
我无法使用Jonathan Savage的解决方案，因为我无法将事件回调传递给animate（）而没有错误。 我今天遇到这个问题并找到了一个简单的解决方案
var $target = $(this.hash), target = this.hash; if (target) { var targetOffset = $target.offset().top - 92; $(this).click(function(event) { event.preventDefault(); $(scrollElem).animate({scrollTop: targetOffset}, 400, function() { location.hash = targetOffset; }); });
从targetOffset变量中减去像素偏移量，然后将location.hash分配给该变量。 滚动到目标哈希时停止页面跳转。
这是我使用的jQuery实现，它基于НикитаАндрейчук的解决方案。 可以通过这种方式动态设置像素调整变量，尽管在此示例中它是硬编码的。
$( 'a' ).each(function() { var pixels = 145; var name = $( this ).attr( 'name' ); if ( typeof name != 'undefined' ) { $( this ).css({ 'display' : 'block', 'height' : pixels + 'px', 'margin-top' : '-' + pixels + 'px', 'visibility' : 'hidden' }); } });
这是我用的。 根据需要设置偏移量。
$('a[href^="#"]').click(function(e) { e.preventDefault(); $(window).stop(true).scrollTo(this.hash {duration:1000,interrupt:true,offset: -50}); });
不想学习Javascript并且总是在寻找最简单的选项，只需在你想要降落的锚点之上创建一个空的DIV然后在CSS中制作div
anchorpointl {margin-top：-115px;}
或者远远高于或低于你想要完成的工作