Stop scrolling div after reaching footer (another div)

I have a back button that appears when the user scrolls the page.
With some help, I managed to implement these functions in the code below: disappears at a certain point after scrolling down, animated scrolling back and animated scrolling to all href = "#" links on the page.

    $('a[href^="#"]').on('click',function (e) {
    e.preventDefault();

    var target = this.hash,
    $target = $(target);

    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 800, 'swing', function () {
        window.location.hash = target;
    });
});

var $win = $(window);

$win.scroll(function () {

    if ($win.scrollTop() > 300) {
        b.fadeIn();
        console.log("fadding in")
    } 
    else {
        b.fadeOut();
    }
  });

});

Here is a working example: http://jsfiddle.net/q8DUC/8/

, ... , "back to top" 30px " " DIV. . , , .

!

UPDATE:

: http://jsfiddle.net/q8DUC/20/
, !
, : 0???

!

+4
1

, , , :

// dynamically get the position of the footer
var FOOTER_POSITION = someNumber;
// i THINK something like var FOOTER_POSITION = $('#T4').position().top; could work

if (300 < $win.scrollTop() && $win.scrollTop() < FOOTER_POSITION) {

, , , - :

  • + 30px
  • , ~ 2000px (FOOTER_START)
  • a > 300 , (FOOTER_START), #back-top bottom
+4

All Articles