针对错误元素的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：

https://jsfiddle.net/ar0vq1ru/

：

<body> 
<main class="main"> 
<div class="block1"> 
blah 
</div> 
<div class="block2"> 
blah 
</div> 

</main> 
<a id="scrollbutton" class="scrolldown">Top</a>

你可以用这个小提琴直接看到问题感谢任何帮助或指导，谢谢。

来源

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

打我吧 - [有一个jsFiddle]（https://jsfiddle.net/daCrosby/ar0vq1ru/12/） – DACrosby

针对错误元素的jQuery

回答

相关问题