Запретить прокрутку по умолчанию Firefox к тегу привязки при загрузке страницы - PullRequest
Новая
       43

Запретить прокрутку по умолчанию Firefox к тегу привязки при загрузке страницы

0 голосов
/ 30 января 2020

У меня есть ссылка на страницу, которая динамически добавляет контент в div. Чего я хочу добиться, так это предотвратить прокрутку браузера по умолчанию на якорь при загрузке страницы. После поиска и опробования различных решений, найденных в Интернете, я получил следующее, скопированное из этого вопроса о переполнении стека :

page1. html

<a href="url/to/page2/#anchor_name">link to page 2</a>

page2 . html

<div id="load-data-received-from-ajax"></div>
<script>

    var hash = window.location.hash
    var scrollToAnchor = function(hash) {
        // If got a hash
        if (hash) {
            // Scroll to the top (prevention for Chrome)
            window.scrollTo(0, 0);
            // Anchor element
            var term = $(hash);
            // If element with hash id is defined
            if (term) {
                // Get top offset, including header height
                var scrollto = term.offset().top - 55;
                // Capture id value
                var id = term.attr('id');
                // Capture name value
                var name = term.attr('name');
                // Remove attributes for FF scroll prevention
                term.removeAttr('id').removeAttr('name');
                // Scroll to element
                $('html, body, document').animate({scrollTop:scrollto}, 0);
                // Returning id and name after .5sec for the next scroll
                setTimeout(function() {
                    term.attr('id', id).attr('name', name);
                }, 500);
            }
        }
    };

    $( document ).ready(function(){
        $.ajax({
            url: '',
            type: 'get',
            success: function(data){
                  $('#data').html(data);
                  scrollToAnchor(hash);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                  $('#data').html('There was an error!);
            }
        });
    });
</script>

Это работает для Chrome, но не для Firefox. В FF окно прокручивается до элемента, определенного в ha sh, но когда атрибут id снова добавляется к элементу, FF прокручивается до этой точки (которая не включает высоту заголовка). Есть идеи, почему это не работает?

1 Ответ

0 голосов
/ 31 января 2020

Просто добавьте префикс scroll- к вашему ха sh: 

<a href="url/to/page2/#scroll-anchor-name">link to page 2</a>

<div id="anchor-name">...</div>

, а во время выполнения просто проверьте и удалите его: 

var hashtpl = "#scroll-";

if (hash && hash.match(RegExp('^' + hashtpl, 'gi')) !== null) {
    hash = "#" + hash.substring(hashtpl.length());
    ...
}
...