滚动到顶部'鼠标后面的按钮

jQuery 'Scroll to top' button which follows mouse?

本文关键字：按钮 鼠标 顶部 滚动      更新时间：2023-09-26

我试图使我的滚动到顶部链接跟随用户的鼠标，当它进入左侧的固定div。我已经做了一个我想做的原型，但我的技能太低了，无法真正实现它。请帮助。

  var mouseX = 0, mouseY = 0;
$(".side").mousemove(function(e){
   mouseY = e.pageY-19; 
});
var follower = $("#follower");
yp = 0;
var loop = setInterval(function(){
    yp += (mouseY - yp) / 6;
    follower.css({top:yp});
}, 10);

小提琴:http://jsfiddle.net/grammakov/tDGRc/1

我在我的网站上有这样的东西:

$("body").on( "mousemove" , "a.refreply",  function(e){ relocatePopup(e); });

当鼠标位于某个类为"reply"的链接上时，它会显示一个div#弹出框，如果鼠标移动，弹出框会跟随光标。显示弹出窗口的部分没有在这里显示，它基本上以$('#popup').show();

结尾

函数relocatePopup是:

function relocatePopup ( e, useglobal ) {
if ( useglobal == true ) {
    var e = new Object;
    e.pageX = global_x;
    e.pageY = global_y;
}
var popup_height = parseInt( $("div#popup").css("height") ) ;
var bottom_popup = e.pageY + popup_height + 20;
var bottom_page = window.pageYOffset + window.innerHeight;
if ( bottom_popup > bottom_page ) {
    $('div#popup').css("top", bottom_page - popup_height - 5 ).css("left",e.pageX+20);
}else{
    $("div#popup").css("top",e.pageY+20).css("left",e.pageX+20);
}
}

基本上它获得了鼠标事件的x,y，剩下的是计算弹出窗口的内容是否会出现在可见屏幕之外，重新计算位置以使弹出窗口保持在页面内，然后改变元素的"top"answers"left"，它们必须绝对定位。

相关文章：