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

New Issue

adam · 2025-12-29T18:24:54+01:00

adam commented

2025-12-29 18:24:54 +01:00

Originally created by @sulisu on GitHub (Nov 23, 2019).

Environment

Python version: 3.5.4
NetBox version: 2.6.7

Steps to Reproduce

Get into a network device page which has ether-channel port.
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.

Originally created by @sulisu on GitHub (Nov 23, 2019).  ### 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.

adam added the status: accepted label 2025-12-29 18:24:54 +01:00

adam closed this issue

2025-12-29 18:24:54 +01:00

adam commented

2025-12-29 18:24:55 +01:00

@hSaria commented on GitHub (Nov 25, 2019):

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 commented on GitHub (Nov 25, 2019): A simple solution with JQuery: ```javascript $('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.

adam commented

2025-12-29 18:24:55 +01:00

@hSaria commented on GitHub (Nov 25, 2019):

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 commented on GitHub (Nov 25, 2019): 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). ```javascript 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).

adam commented

2025-12-29 18:24:55 +01:00

@hSaria commented on GitHub (Dec 6, 2019):

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);

@hSaria commented on GitHub (Dec 6, 2019): I've found a much cleaner solution. I've tested it on Safari and Chrome, but it should be supported just about [everywhere](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollBy#Browser_Compatibility). ```javascript // 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); ```

adam commented

2025-12-29 18:24:55 +01:00

@stale[bot] commented on GitHub (Dec 20, 2019):

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[bot] commented on GitHub (Dec 20, 2019): 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](https://github.com/netbox-community/netbox/blob/develop/CONTRIBUTING.md).

adam commented

2025-12-29 18:24:55 +01:00

@stale[bot] commented on GitHub (Dec 27, 2019):

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.

@stale[bot] commented on GitHub (Dec 27, 2019): 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.

Sign in to join this conversation.

Branches Tags

main

update-changelog-comments-docs

feature-removal-issue-type

20911-dropdown

20239-plugin-menu-classes-mutable-state

21097-graphql-id-lookups

feature

fix_module_substitution

20923-dcim-templates

20044-elevation-stuck-lightmode

feature-ip-prefix-link

v4.5-beta1-release

20068-import-moduletype-attrs

20766-fix-german-translation-code-literals

20378-del-script

7604-filter-modifiers-v3

circuit-swap

12318-case-insensitive-uniqueness

20637-improve-device-q-filter

20660-script-load

19724-graphql

20614-update-ruff

14884-script

02496-max-page

19720-macaddress-interface-generic-relation

19408-circuit-terminations-export-templates

20203-openapi-check

fix-19669-api-image-download

7604-filter-modifiers

19275-fixes-interface-bulk-edit

fix-17794-get_field_value_return_list

11507-show-aggregate-and-rir-on-api

9583-add_column_specific_search_field_to_tables

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/netbox#3030