jQuery定位錯誤的元素
[英]jQuery targeting wrong element
問題描述
我有一個滾動頁面功能，但是由於某種原因，第二個向上滾動頁面的功能是針對上一個元素的。 您可以看到我的意思是：
(function(root, $, undefined) {
"use strict";
// Change class of scrollbutton
$(window).scroll(function(){
($(this).scrollTop() > 300) ? ($('#scrollbutton').addClass('scrollup'),$('#scrollbutton').removeClass('scrolldown')) : ($('#scrollbutton').removeClass('scrollup'),$('#scrollbutton').addClass('scrolldown'));
});
// Scroll to block 2 element - Working
$("#scrollbutton.scrolldown").click(function() {
$('html, body').animate({
scrollTop: $(".block2").offset().top + -1
}, 700);
});
// Scroll to block 1 element - Not Working it just scrolls to block 2!
$("#scrollbutton.scrollup").click(function() {
$('html, body').animate({
scrollTop: $(".block1").offset().top + -1
}, 700);
});
}(this, jQuery));
...這是HTML：
<body>
<main class="main">
<div class="block1">
blah
</div>
<div class="block2">
blah
</div>
</main>
<a id="scrollbutton" class="scrolldown">Top</a>
您可以使用此小提琴直接看到問題：
https://jsfiddle.net/ar0vq1ru/
感謝任何幫助或指導，謝謝。
3 個解決方案
解決方案1
2 2016-02-26 08:18:15
這是行不通的，因為從不調用秒onClick方法。 您將監聽器分配給$（“＃scrollbutton.scrollup”），該啟動器在開始時間不存在。 如果您向下滾動，它將在那里（然后交換類）
解決方案2
1 2016-02-26 08:21:23
(function(root, $, undefined) { "use strict"; // Change class of scrollbutton $(window).scroll(function(){ ($(this).scrollTop() > 300) ? ($('#scrollbutton').addClass('scrollup'),$('#scrollbutton').removeClass('scrolldown')) : ($('#scrollbutton').removeClass('scrollup'),$('#scrollbutton').addClass('scrolldown')); }); // Scroll to block 2 element - Working $("#scrollbutton").click(function() { if($(this).hasClass("scrolldown")){ $('html, body').animate({ scrollTop: $(".block2").offset().top + -1 }, 700); } else{ $('html, body').animate({ scrollTop: $(".block1").offset().top + -1 }, 700) } }); }(this, jQuery));
.block1,.block2 { width: 90%; height:1000px;background:red; } .block2{background:green;} #scrollbutton { display: inline-block; height: 40px; width: 40px; position: fixed; bottom: 40px; right: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); /* image replacement properties */ overflow: hidden; text-indent: 100%; white-space: nowrap; background: rgba(0,0,0, 0.8) url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2017.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0D%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20enable-background%3D%22new%200%200%2016%2016%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpolygon%20fill%3D%22%23FFFFFF%22%20points%3D%228%2C2.8%2016%2C10.7%2013.6%2C13.1%208.1%2C7.6%202.5%2C13.2%200%2C10.7%20%22/%3E%0D%0A%3C/svg%3E%0D%0A') no-repeat center 50%; opacity: 1; -webkit-transition: opacity .3s 0s, visibility 0s .3s; -moz-transition: opacity .3s 0s, visibility 0s .3s; transition: opacity .3s 0s, visibility 0s .3s;transform:rotate(180deg);transition:all .5s ease-in-out;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out; } #scrollbutton.scrollup { visibility: visible; opacity: 1;transform:rotate(360deg);transition:all .5s ease-in-out;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <main class="main"> <div class="block1"> blah </div> <div class="block2"> blah </div> </main> <a href="#0" id="scrollbutton" class="scrolldown">Top</a>
解決方案3
1 已采納 2016-02-26 08:27:49
問題是您的向上滾動單擊不會發生（如@Christian所說）。 這是一個不錯的解決方案：
更換
$("#scrollbutton.scrolldown").click(function() {
與
$('body').on('click',"#scrollbutton.scrolldown",function(){
並更換
$("#scrollbutton.scrollup").click(function() {
與
$('body').on('click',"#scrollbutton.scrollup",function(){
這使用委托事件（請參閱http://api.jquery.com/on/ ），避免了在嘗試附加事件時頁面上沒有正確對象的問題。
jQuery中的元素定位
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.