Back to top button code seem not to take into account .outerHeight()

JavaScript
1

hello all i had started off with this code, which worked

$('#followMe').click(function(){
		$('html, body').animate({ scrollTop: 0 }, 'slow'); //original
	});

so far so good. but i wanted to button to not display until a certain threshold is hit. So started tweaking w/the code below. which is not working. Any suggestions?
thx
D

http://codepen.io/pdxSherpa/pen/XJeYWX

2

Hi,

Look in the error console for errors :smile:

You haven’t defined $window or $f. It should be (I think):

var topPos = $("#masthead").outerHeight() + $("#followMe .window").outerHeight();
    //alert(topPos);
    var $f = $('#followMe');
    var target = $("#masthead")
    var $window = $(window);    
    $window.on('scroll',function(e){
            if($window.scrollTop() >= topPos) {
                $f.fadeIn();
            } else {
                $f.css({display:'none'});
            }
        }).trigger('scroll');
        $f.on('click',function($f){
            $('body,html').animate({
                scrollTop:0
            });
            return false;
        });

The target variable isn’t used either that I can see.

3

Thank you Paul, i thought the window was automatic. guess not. & thought i had defined the f?
But thank you that worked.
D

4

& is the “(e)”
in

            if($window.scrollTop() >= topPos) {
                $f.fadeIn();
            } else {
                $f.css({display:'none'});
            }

a stand in for what?
Just so i can understand this better? i thought it was for $window or this. but neither worked
thx
d

5

If you mean the ‘e’ at the end here: ‘scroll’,function(e) then that is the event object which you can find out details about the event that just happened. You aren’t using it in your routine so it can be removed. It’s often used so that you can say ‘e.preventDefault’ to stop the default behavior of that event.

@James_Hibbard or Paul can explain this in much better detail than me.:slight_smile:

6

k thx!
D

7

Commonly event-based functions have the (e) or (evt) included with the function even if it’s not explicitly used. This helps to inform the person reading the code that the function is triggered at some stage in response to an event.

it’s handy to know this because the this keyword then refers to the element that triggered the event, and other information can be obtained from the event when (not if) somebody has to debug an issue.

8

I kinda realize that part, but for example i used

$f.on('click',function($f)

knowing that that unction affect the variable $f. that could have been a (e) as well.
but in the (e) in

 $window.on('scroll',function(e)

doesn’t seem to stand or $window.
D

9

Well I don’t know where the $f came from. They should all be e or even evt for he greatest of clarity.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.