gfranko / jquery.tocify.js

A jQuery Table of Contents plugin that can be themed with Twitter Bootstrap or jQueryUI.
http://gregfranko.com/jquery.tocify.js/
MIT License
928 stars 216 forks source link

scrollTo not working #106

Closed schantanu closed 6 years ago

schantanu commented 6 years ago

I have a Navbar that covers up the selected table of contents title. I tried making modifications to the scrollTo value but fail to see it working. What is the right way to achieve an offset from the top of the page, so that the selection and title are aligned?

seweil commented 6 years ago

I've done this by scrolling the content, not the entire page. Sample here with minimal delta from base Slate: https://github.com/seweil/slate-test And in production here: http://smartsheet-platform.github.io/api-docs/

One unresolved bug: Browser back button doesn't work well. I'd appreciate suggestions here.

(The quick and dirty solution is to add a lot of padding before each header.)

schantanu commented 6 years ago

Hi @seweil , I am trying to achieve exactly that. The Navbar is in position: fixed, and hence hiding the page content. What parameter did you use to scroll the content from the tocify jquery? I do not want to resort to padding between headers.

seweil commented 6 years ago

You'll will have to look at the code changes in this fork

schantanu commented 6 years ago

Alright, I got it to work. I added the intended value in pixels (e.g. 70) on line 953.

  // _scrollTo
  // ---------
  //      Scrolls to a specific element
  _scrollTo: function(elem) {

    var self = this,
      duration = self.options.smoothScroll || 0,
      scrollTo = self.options.scrollTo + 70,
      currentDiv = $('div[data-unique="' + elem.attr("data-unique") + '"]');

    if (!currentDiv.length) {

      return self;

    }

I am not sure why this works, but inserting the value in the scrollTo parameter itself on line 88 does not.