Прокрутка до определенного div с помощью window.onload без добавления веб-адреса

Во-первых, следующее важное различие:

• Селектор jQuery #section1 ищет элемент HTML с идентификатором "section1", т. е. <div id="section1"></div>
• Хэш URL-адреса href #section1 ищет якорь с именем "section1", т. е. <a name="section1"></a>

Это основное отличие, которое вам нужно проверить и понять. Итак, вам обычно нужно:

<a name="section1"></a>
<div id="section1">... your content here ...</div>

Но так как вы прокручиваете горизонтально, я собираюсь сделать это без части <a name=...></a> и иметь дело с хешем в обработчике загрузки окна, как я объясню ниже.

Далее, я бы не стал называть переменную JavaScript «событием», так как это очень похоже на ключевое слово, поэтому попробуйте переименовать ее в ev.

Если вы хотите, чтобы обработчик кликов (функция, которую вы привязываете к событию click) не следовал по ссылке, по которой щелкнули, эта функция должна возвращать false:

$('ul.nav a').click(function (ev) {
    var anchor = $(this);
    $('.viewport').stop().animate({
        scrollLeft: $($(anchor).attr('href')).offset().left
    }, 1500,'easeInOutExpo');

    // Add the section ID to the URL
    window.location.hash = $(anchor).attr('href').substring(1);

    ev.preventDefault();
    return false;
});

Затем я предлагаю вам переместить <ul class="nav">...</ul> за пределы разделов разделов, чтобы вам не приходилось повторять это внутри ваших разделов. Поскольку вы, кажется, прокручиваете влево/вправо, я предполагаю, что вы перемещаете свои разделы div рядом друг с другом в широком контейнере:

<div class="viewport">
    <div class="container clearfix">
        <div class="section" id="section1">
            <h2>Technologies</h2>
            <p>Text</p>
        </div>
        <div class="section" id="section2">
            ... content ...
        </div>
        <div class="section" id="section3">
            ... content ...
        </div>
    </div>
</div>
<ul class="nav">
    <li><a href="#section1">1</a></li>
    <li><a href="#section2">2</a></li>
    <li><a href="#section3">3</a></li>
</ul>

Используя следующий CSS (в качестве примера для 3 элементов div по 600 пикселей, размещенных рядом друг с другом внутри контейнера размером 1800 пикселей, обернутых окном просмотра размером 600 пикселей):

.viewport {
  width: 600px;
  overflow: hidden;
  overflow-x: scroll;
}
.container {
  width: 1800px;
}
.section {
  float: left;
  width: 600px;
}

Чтобы узнать о классе clearfix, обратитесь к clearfix от Bootstrap.

Поскольку вы прокручиваете горизонтально, я думаю, что <a name=...></a> вещи не будут работать, поэтому я бы сделал проверку загрузки для хэша и прокручивал там при доступе к странице с предустановленным хэшем. Это было сделано в обработчике загрузки окна в следующем фрагменте вместе с запуском в разделе 3, когда не указан хэш:

Что касается запуска в разделе 3 при загрузке, добавьте это в свой обработчик $(window).load(), например:

$(window).load(function() {
   var startSection = window.location.hash;
   if (startSection == "") startSection = '#section3';

   $('.viewport').scrollLeft($(startSection).offset().left);
   window.location.hash = startSection;
});

Отказ от ответственности: непроверенный код! :) Но, пожалуйста, попробуйте это, и это должно приблизить вас к тому, чего вы пытаетесь достичь.

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

Почему бы вам не перейти к этому div при загрузке окна? И измените привязку с помощью on, начиная с jQuery 1.7 .on() является предпочтительным методом для прикрепления обработчиков событий к документу.

Итак, ваш код должен быть примерно таким

$(document).ready( function(){
    $('ul.nav a ').on('click ', function (event) {
        var $anchor = $(this);
        $('html, body ').stop().animate({
            scrollLeft: $($anchor.attr('href')).offset().left
        }, 1500, 'easeInOutExpo ');

        event.preventDefault();
    });
});


$(window).on('load', function () {

    $('html, body').stop().animate({
        scrollLeft: $('#section3').offset().left
    }, 1500, 'easeInOutExpo ');

});