仍在我的网站上工作:http://i333180.iris.fhict.nl/p2_vc/
有一个用于向下导航的按钮,动作是即时的,但平滑滚动更好.
所以,我谷歌周围,尝试了很多,我找到的最短的脚本是这样的:但我不能让它工作.
$(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>
这必须做同样的事情; 滚动得很好.
我希望我解释它是可以理解的,如果没有,我想再试一次.问候
EDIT脚本没有添加到在线站点,因为脚本还没有工作,如果它更容易我可以在线添加它.
更新站点在线,没有工作脚本
小智 2
该脚本按预期作用于您的实时副本上的链接，所以我相信您指的是您的videoEnd()功能。
您发现的平滑滚动脚本仅适用于锚标记 ( <a>)。
由于window.location.href = "#section"不是锚标记，因此不会受到脚本的影响。
然而，您可以做的是获取该脚本的重要部分并在您的videoEnd()函数中使用它，如下所示。
function videoEnded() {
$('html,body').animate({
scrollTop: $("#section").offset().top
}, 1000);
}编辑：
它不适合你的原因是因为你正在使用file://协议和链接到 jQuery 的脚本源浏览页面
//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
它使用//相对方案，这意味着浏览器将附加当前的浏览方案，将其变成这样..
文件://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