Одностраничный сайт открывается в неправильном разделе

Question

Поэтому я создал одностраничный веб-сайт, который использует плавную прокрутку jQuery для перехода к разделам веб-сайта. По какой-то причине, когда я открываю страницу в браузере (я тестировал несколько браузеров и компьютеров), веб-сайт открывается на полпути вниз по странице, а не вверху страницы.

Вот сценарий, который я использую для создания плавной прокрутки.

вот сайт

http://usspcatalystcentre.org.uk/

<script>
    $(function() {

        function filterPath(string) {
            return string
            .replace(/^\//,'')
            .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
            .replace(/\/$/,'');
        }

        var locationPath = filterPath(location.pathname);
        var scrollElem = scrollableElement('html', 'body');

        // Any links with hash tags in them (can't do ^= because of fully qualified URL potential)
        $('a[href*=#]').each(function() {

            // Ensure it's a same-page link
            var thisPath = filterPath(this.pathname) || locationPath;
            if (  locationPath == thisPath
                && (location.hostname == this.hostname || !this.hostname)
                && this.hash.replace(/#/,'') ) {

                    // Ensure target exists
                    var $target = $(this.hash), target = this.hash;
                    if (target) {

                        // Find location of target
                        var targetOffset = $target.offset().top;
                        $(this).click(function(event) {

                            // Prevent jump-down
                            event.preventDefault();

                            // Animate to target
                            $(scrollElem).animate({scrollTop: targetOffset}, 700, function() {

                                // Set hash in URL after animation successful
                                location.hash = target;

                            });
                        });
                    }
            }

        });

        // Use the first element that is "scrollable"  (cross-browser fix?)
        function scrollableElement(els) {
            for (var i = 0, argLength = arguments.length; i <argLength; i++) {
                var el = arguments[i],
                $scrollElement = $(el);
                if ($scrollElement.scrollTop()> 0) {
                    return el;
                } else {
                    $scrollElement.scrollTop(1);
                    var isScrollable = $scrollElement.scrollTop()> 0;
                    $scrollElement.scrollTop(0);
                    if (isScrollable) {
                        return el;
                    }
                }
            }
            return [];
        }

    });
    </script>

спасибо заранее, Том

Answer 1

Под Применить удалить autofocus из ваших элементов ввода.

Автофокус:

Когда он присутствует, он указывает, что элемент должен автоматически получать фокус при загрузке страницы.

Вышеуказанное означает, что когда для элемента ввода включена автофокусировка, страница будет прокручиваться до этого элемента при загрузке страницы, что также было проблемой в вашем случае.

Образец ДЕМО, объясняющий сценарий.

Надеюсь, поможет