如何为平滑滚动设置Offsett [英] How to Set Offsett for Smooth Scroll
问题描述
I have implemented the CSS Tricks Smooth Page Scroll on my site and it's working pretty nicely. However, because I have a fixed nav at the top of the page, when the page scrolls to the appropriate anchor div, the top of the div disappears behind the nav. How can I offset the scroll (about 70px) so that the whole div is shown? I tried doing this:
var targetOffset = $target.offset().top - 70;
但是那并不完全有效.页面滚动到适当的位置，但随后立即跳回上一层，以便div的顶部被隐藏.我想念什么?这是完整的代码:
But that doesn't quite work. The page scrolls to the appropriate spot but then it immediately jumps back up so that the top of the div is hidden. What am I missing? Here's the code in full:
$(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');
// Any links with hash tags in them (can't do ^= because of fully qualified URL potential)
$('a[href*=#]').each(function() {
// Ensure it's a same-page link
var thisPath = filterPath(this.pathname) || locationPath;
if ( locationPath == thisPath
&& (location.hostname == this.hostname || !this.hostname)
&& this.hash.replace(/#/,'') ) {
// Ensure target exists
var $target = $(this.hash), target = this.hash;
if (target) {
// Find location of target
var targetOffset = $target.offset().top - 70;
$(this).click(function(event) {
// Prevent jump-down
event.preventDefault();
// Animate to target
$(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
// Set hash in URL after animation successful
location.hash = target;
});
});
}
}
});
// Use the first element that is "scrollable" (cross-browser fix?)
function scrollableElement(els) {
for (var i = 0, argLength = arguments.length; i <argLength; i++) {
var el = arguments[i],
$scrollElement = $(el);
if ($scrollElement.scrollTop()> 0) {
return el;
} else {
$scrollElement.scrollTop(1);
var isScrollable = $scrollElement.scrollTop()> 0;
$scrollElement.scrollTop(0);
if (isScrollable) {
return el;
}
}
}
return [];
}
});
预先感谢您的帮助.
推荐答案
这总是会发生.我搜索并寻找答案，感到沮丧，发布问题寻求帮助，然后立即找到我的问题的答案.愚蠢的.无论如何，这是可能遇到相同问题的任何人的解决方案.
This always happens. I search and search for an answer, get frustrated, post a question asking for help, and then immediately find an answer to my problem. Silly. Anyway, here's the solution for anyone who might be having the same problem.
例如，如果您想将偏移量更改为70px，请将代码更改为此:
If you want to change the offset by 70px, for example, change the code to this:
var targetOffset = $target.offset().top - 70;
但是，除非您从代码中删除此行...
However, unless you remove this line from the code...
location.hash = target;
...页面将滚动到右侧，然后立即跳回上一层，以便div的顶部隐藏在标题的后面.您可以将上面的行从代码中删除，所有内容都可以正常工作，但URL不再更改以反映用户在页面上的位置这一事实除外.
... the page will scroll to the right spot and then immediately jump back up so that the top of the div is hidden behind the header. You can remove the above line from the code and everything will work great, except for the fact that the URL will no longer change to reflect the user's position on the page.
如果您希望更改URL(出于可用性考虑，我认为这是个好主意)，那么您要做的就是更改锚点div的CSS.为padding-top添加一个正值，为margin-top添加一个负值.例如:
If you want the URL to change (and I think this is a good idea for usability purposes), then all you have to do is change the CSS for the anchor divs. Add a positive value for padding-top and a negative value for margin-top. For example:
#anchor-name {
padding-top: 70px;
margin-top: -70px;
}
我只有3个div，所以我只是将CSS插入每个div中，所以一切正常.但是，如果您有很多锚点div，则可以考虑创建.anchor类，将CSS放在此处，然后将该类应用于所有适当的div.
I only have 3 divs, so I just plugged in that CSS to each of them and voila, everything worked. However, if you have a lot of anchor divs, you might consider creating a class of .anchor, putting the CSS there, and applying the class to all the appropriate divs.
我希望这会有所帮助！
这篇关于如何为平滑滚动设置Offsett的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
