[v2] navbar disappears in template after link click scroll to #id

1

iOS Application, framework v2, page inside a template.
My fixed navbar disappears in template after I click on a link that scrolls to #id. If I manually scroll the navbar stays. If I click on buttons on the navbar that open popups or trigger the sidebars the navbar stays where it is.

if the link is:

<a href="#bookmark1" class="link external">Bookmark1</a>

which refers to a div at the bottom of the page.

<div id="bookmark1">...</div>

The link scrolls to the div, but the navbar disappears.
If I use:
app.navbar.show(’.navbar’);
Nothing happens

When I check the css in a browser, it looks the same as it did before the link was clicked.

Any ideas?

2

You shouldn’t use such anchor links in F7 as browser won’t handle it correctly, you need to manually scroll containing .page-content element:

<div class="page">
  <div class="page-content">
    <a class="scroll-to-link link" data-scroll-to="#bookmark1">...</a>
    ...
    <div id="bookmark1">...</div>
  </div>
</div>

And then in page init for this page:

$('.scroll-to-link').on('click', function() {
  var pageContent = $(this).parents('.page-content');
  var scrollToId = $(this).attr('data-scroll-to');
  pageContent.scrollTop($(scrollToId).offset().top);
});
3

Thanks, this really helped.