jQuery таргетинг на неправильный элемент

У меня есть функция прокрутки страницы, но по какой-то причине вторая функция для прокрутки страницы обратно нацелена на предыдущий элемент. Вы можете увидеть, что я имею в виду:jQuery таргетинг на неправильный элемент

(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/

Цените любую помощь или руководство, спасибо.

источник

2016-02-26 d1ch0t0my

Проблема заключается в том, что ваш Scrollup щелчок не происходит (как говорит @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/) и позволяет избежать проблемы, с которой вы не имеете нужного объекта на странице в момент, когда вы пытаетесь присоединить свои события.

источник

2016-02-26 08:27:49

Спасибо Крису. Я правильно ответил на ваш ответ, так как это обеспечило решение, а также помогло мне понять проблему. Я ценю вашу помощь помощника :). – d1ch0t0my

Это не работает, поскольку метод onClick не вызывается. Вы оцениваете слушателя до $ ("# scrollbutton.scrollup"), которого нет во время начала. он будет там, если вы прокрутите вниз (то поменять классы)

источник

2016-02-26 08:18:15 Christian

(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> 
 

 
\t <main class="main"> 
 
\t <div class="block1"> 
 
\t blah 
 
\t </div> 
 
\t <div class="block2"> 
 
\t blah 
 
\t </div> 
 
\t \t 
 
\t </main> 
 
\t <a href="#0" id="scrollbutton" class="scrolldown">Top</a>

источник

2016-02-26 08:21:23

Beat me to it - [есть jsFiddle] (https://jsfiddle.net/daCrosby/ar0vq1ru/12/) – DACrosby

jQuery таргетинг на неправильный элемент

ответ

Смежные вопросы