Question

我有一个带课程的按钮＆＃34; scrollToTop＆＃34;单击时滚动到页面顶部。这是js文件：

$(document).ready(function(){

  //Check to see if the window is top if not then display button
  $(window).scroll(function(){
    if ($(this).scrollTop() > 100) {
        $('.scrollToTop').fadeIn();
    } else {
        $('.scrollToTop').fadeOut();
    }
  });

  //Click event to scroll to top
  $('.scrollToTop').click(function(){
    $('html, body').animate({scrollTop : 0},800);
    return false;
  });


});

所以这个按钮还有一个：hover属性：

.scrollToTop:hover{
  opacity: 1.0;
  box-shadow: 0 10px 20px rgba(0,0,0,0.25), 0 8px 8px rgba(0,0,0,0.22);
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

现在，众所周知：悬停在移动设备中不起作用，即1）您必须单击按钮才能将不透明度更改为1.0＆amp; 2）你必须点击其他地方将不透明度改回原来的状态（让我们说，0.5）。

在这里，我想要模拟第二部分。我想编辑jquery，以便当页面滚动到顶部时，scrollToTop会自动失去焦点，这样它就会失去：悬停效果，并且它的不透明度会自动返回到0.5，而用户不必点击其他地方。我希望我清楚自己。这可能吗？如果没有，还有其他方法可以获得相同的结果吗？提前谢谢！

Answer 1

如果我做对了，我认为你需要使用：

 $('.scrollToTop').blur();

所以你可以把它放进去：

$('.scrollToTop').click(function(){
    // Remove focus from the button
    $('.scrollToTop').blur();
    $('html, body').animate({scrollTop : 0},800);        
    return 
});

或者，另一个StackOverflow question建议使用ontouchend事件，然后删除元素并将其重新附加到dom：

$('.scrollToTop').on('touchend', function(){
    var el = this;
    var par = el.parentNode;
    var next = el.nextSibling;
    par.removeChild(el)
    setTimeout(function() {
        par.insertBefore(el, next);
    },0);
});

使一个元素在jquery中失去焦点

1 个答案: