我尝试使用我在网上(Smoothly scroll to an element)找到的js-function覆盖了滚动到id的事件。
由于未知原因,它不会启动。 Js本身已正确实现,因为我设法用document.print('test');
我真的不喜欢Js,所以请耐心等待我。
的index.php:
<html>
<head>
<title>MyWebsite</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!-- JS WORKS THIS WAY -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- FIRST TRY HERE -->
<script src="jquery/onScroll.js"></script>
<link rel="stylesheet" href="css/layout.css" />
</head>
<body>
<!-- SECOND TRY HERE / also with <script type="text/javascript">-->
<script>
$('a[href^="#"]').on('click', function(event) {
var target = $(this.href);
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
}
});
</script>
<div id="header">
<div id="header" class="image light">
Description overlayed on image.
<footer class="dark">
My footer
</footer>
</div>
<div id="header" class="description">
Another Content
</div>
</div>
<div id="register">
Some Content.
</div>
</body>
</html>
onScroll.js
$('a[href^="#"]').on('click', function(event)
{
var target = $(this.href);
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
}
});
结果:
什么都没发生。它以默认方式跳跃。经过测试的Chrome和Firefox。
我希望我不会因为这件相当简单的事而被踢掉。 ^^
感谢您的帮助。非常感谢。
编辑 - &gt; FIDDLE
答案 0 :(得分:2)
问题在于您的target
变量。 this
引用DOM元素,如另一个答案所述,this.href
返回元素的完整href。更好的解决方案是使用jQuery的.attr
方法返回href属性的确切内容。 E.g:
$('a[href^="#"]').on('click', function(event) {
var target = $($(this).attr('href'));
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
}
});
这样,您将target
设置为包含元素(在本例中为一个)的jQuery集合,该元素与href中的选择器匹配,例如#Second
答案 1 :(得分:1)
你的问题就在这一行
var target = $(this.href);
即使您在html中将href设置为#Second
,浏览器也会将href设置为完整路径(例如:http://www.yoursite.com#Second)。要获得您的哈希选择器,您可以使用类似的东西。
var target = $('#' + this.href.split('#')[1]);
答案 2 :(得分:0)
我对您的代码进行了一些更改并且工作正常。 在滚动到另一个div的链接上,我使用了:
<a href="javascript:;" data-scroll-to="#Second" class="button">Scroll to Second!</a>
关于javascript代码:
$('[data-scroll-to]').on('click', function(event) {
var target = $(this).data('scroll-to');
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: $(target).offset().top
}, 1000);
}
});
现在,只要您想要滚动某些内容,只需在代码中使用data-scroll-to="#something"
,在href属性上放置javascript:;
,以防止链接上发生任何onclick事件。