CODEWITHSUNDEEP
javascriptjqueryscroll
farjam
farjam

Reputation: 2289

Slowly scroll the content of a div on hover and stop on mouseoff

Please take a look at this website

I'm trying to implement two arrows on top and bottom of the gallery so when people mouse over the arrows, the content would scroll top and bottom respectively.

Here is the code I'm currently using that scrolls the content down when you hover over the bottom arrow. But there are two issues with it:

  1. I want the scrolling to stop when the user mouses off

  2. Hopefully do not display the arrow(s) if there is no more content left to scroll

    if ( $("body").hasClass('projects') ) {
    $("#jig1").height($(document).height() - 187);

    $("#scroll-to-bottom").hover(
        function () {
            $("#jig1").animate({ scrollTop: $(document).height() }, 10000);
        },
        function () {

        }
    );
}

Can anyone offer an improved solution?

Upvotes: 0

Views: 2922

Answers (2)

Infira
Infira

Reputation: 167

Answer to the seccond question. Add the inner wrapper to the divs blocks Html should look like this

<div id="jig1">
   <div id="jig1Inner">
     ... here put rest of the code

if ($("body").hasClass('projects')) 
{
    $("#jig1").height($(document).height() - 187);

    var watchScrollers = function()
    {
        var tmp = $("#jig1Inner").height() - $("#jig1").height();
        if (tmp == $("#jig1").scrollTop()) 
        {
            $("#scroll-to-bottom").css("visibility","hidden");
        }
        else
        {
            $("#scroll-to-bottom").css("visibility","visible");
        }
        if ($("#jig1").scrollTop() == 0) 
        {
            $("#scroll-to-top").css("visibility","hidden");
        }
        else
        {
            $("#scroll-to-top").css("visibility","visible");
        }
    }

    $("#scroll-to-bottom").unbind("hover").hover(function() {
        $("#jig1").stop().animate({scrollTop: $("#jig1Inner").height() - $("#jig1").height()}, 10000);
    }, function() {
        $("#jig1").stop(); //stops the animation
        watchScrollers();
    });
    $("#scroll-to-top").unbind("hover").hover(function() {
        $("#jig1").stop().animate({scrollTop: 0}, 10000);
    }, function() {
        $("#jig1").stop(); //stops the animation
        watchScrollers();
    });
    watchScrollers();
}

Upvotes: 2

Anil kumar
Anil kumar

Reputation: 4177

Try this:

$("#scroll-to-bottom").mouseover( function () {
   $("#jig1").animate({ scrollTop: $(document).height() }, 10000);
});

$("#scroll-to-bottom").mouseout( function () {
   $("#jig1").stop()
});

Upvotes: 2

Related Questions