仍在我的网站上工作:http://i333180.iris.fhict.nl/p2_vc/
有一个向下导航页面的按钮， Action 是即时的，但平滑滚动更好。
所以，我四处搜索，尝试了很多东西，我找到的最短的脚本是这个，但我无法让它工作:
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
引用:https://css-tricks.com/snippets/jquery/smooth-scrolling/
这就是我在代码之间添加的方式:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
</head>
按钮:
<body>
<a id='button_down' href='#section' onclick="document.getElementById('moodvideo').pause()"><img src='scroll.png' alt='Scroll'></a>
</body>
我检查了给出的示例站点，并以相同的方式将其添加到我的 html 中。 引用检查链接:https://css-tricks.com/examples/SmoothPageScroll/ 但我无法让它工作..
此外，我还有另一个脚本，它需要在视频结束后执行相同的操作。 现在的脚本是:
<script>
function videoEnded() {
window.location.href="#section";
}
</script>
这必须做同样的事情；很好地滚动。
我希望我解释的很清楚，如果不是，我想再试一次。 问候
编辑 脚本未添加到在线站点，因为该脚本尚未运行，如果这样更容易，我可以在线添加它。
更新 站点在线但脚本不工作...
最佳答案
该脚本按预期作用于您的 Live Copy 上的链接，所以我相信您指的是您的 videoEnd()功能。
您找到的平滑滚动脚本仅适用于 anchor 标记 (<a>)。
作为window.location.href = "#section"不是 anchor 标签，不受脚本影响。
然而，您可以做的是获取该脚本的重要部分并将其用于您的 videoEnd()像这样的功能。
function videoEnded() {
$('html,body').animate({
scrollTop: $("#section").offset().top
}, 1000);
}编辑:
它对您不起作用的原因是您正在使用 file:// 浏览页面协议(protocol)和链接到 jQuery 的脚本源是
//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
它使用 // relative scheme，意思是浏览器会追加当前的浏览scheme，变成这个..
file://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
这是不存在的。如果指定 http://它会起作用
http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
关于Javascript smoothscroll 由于某种原因不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30831454/