Question

I am a neophyte when it comes to javascript. I am a UX designer and I am trying to use some code in my personal website. So far, it’s going well, but I am having an error that google has not helped me figure out so far.

What I am doing is having a button that does the follow:

1. On click, it stats a .toggle with a callback.
2. The first part of the callback uses .slideDown to open up a section and scroll it down to reveal hidden content
3. At the same time, it moves the top of the section to be 50px from the top of the page, regardless where it was when you clicked it. This is so the hidden content now fills the page.

This part works fine, error free. Here is my problem.

1. In the callback, I want it to use .slideUp to close the content area again. This works fine.

2. But when I try to use the scrollTop: again, I get this error:

   Uncaught TypeError: Property ‘top’ of object # is not a function

Here is my coffeescript:

jQuery(document).ready theExpander = ->
  jQuery("#expander").toggle (->
    # first callback to slide it down
    jQuery(".expanding").slideDown 1000
    jQuery(this).toggleClass "darker"
    jQuery("html, body").animate
      scrollTop: jQuery(this).offset().top - 50
    , 600
    jQuery(".more").addClass "hidden"
    jQuery(".less").addClass "shown"
  ), ->
    # second callback to slide it up
    jQuery(".expanding").slideUp 1000
    jQuery(this).toggleClass "darker"
    jQuery("html, body").animate
      scrollTop: jQuery(this).offset().top 200
    , 600
    jQuery(".more").removeClass "hidden"
    jQuery(".less").removeClass "shown"

The error appears on the 2nd click of the button which is initiating the callback. I have no inkling as to why this is. Can I not have the callback use the same scrollTop twice?

Does anyone have an idea on what I am doing here? If I remove those lines on the 2nd callback, it works without an error:

    jQuery("html, body").animate
      scrollTop: jQuery(this).offset().top 200
    , 600

Where do I start with this? Do I need to reidentify an ID in the 2nd callback for the Property 'top' of object #<Object> is not a function error or omission?

I’m writing this through extreme trial and error, this is the first callback I’ve ever done. If someone can point out the error of my ways, it would be much appreciated.

Answer 1

jQuery(this).offset().top 200

is translated to

jQuery(this).offset().top(200)

and since top isn’t a function, but a property, you get an error.

Did you mean this?

jQuery(this).offset().top - 200