我使用jquery的scrollTop函数在不同锚点之间切换时使滚动平滑。
首先,这是网址
the problem
这是我的jQuery脚本
“ ziel”只是“ target”的德语单词,只是为了让您知道为什么将此变量称为“ ziel”
$(document).ready(function() {
$('a[href*=#]').bind("click", function(event) {
event.preventDefault();
var ziel = $(this).attr("href");
$('#portraitcontent').animate({
scrollTop: $(ziel).offset().top
}, 3000 , function (){location.hash = ziel;});
});
return false;
});
那么如何在动画结束时不出现难看的跳跃的情况下实现平滑滚动呢?
有任何想法吗?
我真的不知道该怎么办。花那个小时的that子!
感谢您的建议!
编辑
有了这个新代码:
$(document).ready(function() {
$('a[href*=#]').bind("click", function(event) {
event.preventDefault();
var ziel = $(this).attr("href");
$('#portrait-entry').animate({
scrollTop: $(ziel).offset().top - 230
}, 1500 , function (){
if(window.history.replaceState){
window.history.replaceState(null, document.title, ziel); // <--here
}
});
});
return false;
});
流畅的滚动效果,不会出现难看的跳跃
但现在
我的锚链接无法正常工作。
请检查the problem-单击“ fortbildungen”,然后单击“ mitgliedschaften”时,它不会向下滚动到锚点。
我想我必须重设或做某事。这样,因为我认为当您在#anchor页面上时,链接无法正常工作。
我不喜欢js / jquery。所以也许有人可以给我一个建议。我不知道如何用谷歌搜索这种问题。
感谢您的帮助和所编辑的代码,这使我的滚动更加流畅。
最佳答案
仅仅因为您更改了动画回调中的URL,才导致难看的跳转。
支持html5的浏览器的解决方案是使用“ window.history.replaceState”来更改url,而不是直接更改url。
代码如下:
$(document).ready(function() {
$('a[href*=#]').bind("click", function(event) {
event.preventDefault();
var ziel = $(this).attr("href");
$('#portraitcontent').animate({
scrollTop: $(ziel).offset().top
}, 2500 , function (){
if(window.history.replaceState){
window.history.replaceState(null, document.title, ziel); // <--here
}
});
});
return false;
});