Question

我不是一个开发人员（更像是一个webdesigner），我想知道如何做到以下几点。一旦我看到一个网站有一个带有链接的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);
   }); 
});

Example

编辑或者如果您将Spokey的评论与我的作品混合：Example 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");
    });
});

链接到顶部与以下div

2 个答案: