gpt4 book ai didi

Javascript smoothscroll 由于某种原因不起作用

转载 作者:太空狗 更新时间:2023-10-29 15:10:58 26 4
gpt4 key购买 nike

仍在我的网站上工作: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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com