Shortcut button of LAG in device page lead to position just below the right position

[sulisu]

Environment

• Python version: 3.5.4
• NetBox version: 2.6.7

Steps to Reproduce

1. Get into a network device page which has ether-channel port.
2. Click the etherchannel button on the right of the member port.

Expected Behavior

Page jumps to the position of the correct etherchannel interface, which is the first line in interfaces list on screen.

Observed Behavior

The next etherchannel interface after the corret etherchannel interface show on the first line, while the desired interface is covered by the header toolbar, so it is unvisiable. You have to scroll the mouse wheel up to see it.
I have tested it on two computers with different version of Chrome, 48 and 72.

[hSaria]

A simple solution with JQuery:

$('html, body').animate({scrollTop: $(':target').offset().top - $('.navbar-header').height()});

I had to use the navbar-header class instead of the navbar element because the former is present in smaller windows (e.g. mobile view) while the latter isn't (1px height).

The advantage is that the above will account for any changes in the header size. Also, the animation is quite smooth (currently left to the default 400ms duration).

The disadvantage is that it's JQuery-based and will require modifying the click event (either for the individual anchors or all of them).

It seems like CSS-based offsets rely on creating a hidden element before the anchor target, though there may be a cleaner or more elegant way which I haven't encountered.

[hSaria]

I've got a small JQuery script that adds a handler to all links (anchors). You can copy-paste it into your browser console and try out some links.

This doesn't remove the default handler meaning it won't break any existing functionality; it's rather graceful if it runs into an error.

Note: there may be a cleaner way to get the anchor target (href attribute).

function scrollToHash(hash) {
  if (hash && hash.charAt(0) == '#') {
    // Use getElementById for the value of href as it may contain dirty characters for JQuery
    var offset = $(document.getElementById(hash.substring(1))).offset();

    // navbar-header class is always present as opposed to navbar element which isn't in small windows
    var header = $('.navbar-header');

    if (header && offset) $('html, body').animate({
      scrollTop: offset.top - header.height()
    });
  }
}

$(document).ready(function() {
  $('a').on('click', function(event) {
    scrollToHash($(event.target).attr('href'));
  });
});

However, this doesn't work if the target is changed using the URL (may need another event handler for that).

[hSaria]

I've found a much cleaner solution. I've tested it on Safari and Chrome, but it should be supported just about everywhere.

// Scroll up if a hash is present
function headerOffsetScroll() {
  if (window.location.hash) {
    // navbar-header class is always present as opposed to navbar element which isn't in small 
    window.scrollBy(0, -$('.navbar-header').height());
  }
}

// Account for the header height when hash-scrolling
window.addEventListener('load', headerOffsetScroll);
window.addEventListener('hashchange', headerOffsetScroll);

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. NetBox is governed by a small group of core maintainers which means not all opened issues may receive direct feedback. Please see our contributing guide.

[stale]

This issue has been automatically closed due to lack of activity. In an effort to reduce noise, please do not comment any further. Note that the core maintainers may elect to reopen this issue at a later date if deemed necessary.