jquery - 使用以下 div 链接到顶部

Question

我不完全是开发人员（更多的是网页设计师），我想知道如何制作以下内容。有一次，我看到一个网站有一个 div，其中包含一个将页面滚动到顶部的链接。该 div 仅在鼠标靠近页面垂直滚动条并跟随鼠标光标时显示，但仅在垂直方向显示，因为它始终与页面右侧对齐。有人知道制作这个的教程吗？

Answer 1

HTML：

<a href="#" title="To the top of this page"><b>BACK TO TOP</b></a>

并且像任何元素一样简单地定位它。用一点 CSS 很容易做到。jQuery允许跟踪鼠标

CSS： a { position:fixed; right:10px; bottom:10px; }

jQuery：

$(document).ready(function(){
   $(document).mousemove(function(e){
       if(e.pageX > window.innerWidth - 200)
          $("a").css("top", e.pageY);
   }); 
});

例子

编辑或者如果您将 Spokey 的评论与我的工作混合：示例 2

Answer 2

可能是这样的吗？ http://jsfiddle.net/blackjim/3kCtJ/3/ （一个非常简单的例子）

$(function () {
    var $rightSide = $('#rightSide'),
        $scrollerDiv = $('#scrollerDiv'),
        viewportH = $(window).height();

    $rightSide
    .css('top', viewportH)
    .mouseenter(function () {
        //    mouse is now in #rightSide
        $scrollerDiv.fadeIn(300);
        $rightSide.mousemove(function (e) {
            var calcTop = e.pageY - viewportH - 25;
            $scrollerDiv.css('top', calcTop + 'px');
        });
    })
    .mouseleave(function () {
        $scrollerDiv.fadeOut(300);
        $rightSide.unbind('mousemove');
    })
    .click(function () {
        $(document.body).animate({
            scrollTop: 0
        }, "slow");
    });
});