Проблема с прокруткой с плавной прокруткой javascript

Question

Это своего рода сложная проблема.

я первый работал на получение гладкой прокрутки для работы на this question.

Тогда, я получил его на работу. Но теперь возникла другая проблема, когда я не могу прокрутить мой «плавный прокручиваемый контент (который находится на div # справа)» с помощью мыши. Значение не может перемещаться вверх и вниз вручную, если я не нажимаю ссылки, которые запускают плавную прокрутку.

Другое дело, что мое фоновое изображение перепуталось. До того, как размер фона был установлен на «обложку», чтобы он полностью растянулся. Но когда я вносил изменения, чтобы исправить проблемы с прокруткой, настройка фона также перепуталась, и теперь она не в правильном размере.

текущее состояние http://1ne-studio.com/test2/index2.html

ID: тест
проход: 2015

правильный внешний фон http://1ne-studio.com/test2/index.html

Как я мог исправить эти проблемы ... Любая помощь будет высоко ценится!

Answer 1

Хорошо, есть некоторые вещи, которые вы сделали, что я не был уверен, почему. Но я сделал страницу, очень похожую на твою, здесь On jsfiddle. Макет, который вы сделали, ухудшается по мере того, как он становится меньше по ширине, а мобильные устройства составляют более 50% трафика, вам может потребоваться подход, основанный на мобильных устройствах. В любом случае, проверьте ссылку, и у вас есть все, что вы хотите (сведено к минимуму).

Я использовал функцию анимации JQuery

$.fn.scrollNav = function (margin_top) { 

    event.preventDefault(); 
    var 
     goTo = $(this).attr("href"), 
     addTop = margin_top | 0; 

    $('html, body').animate({ 
     scrollTop: $(goTo).offset().top + addTop 
    }, 700); 
} 

Он также использует нормальные ссылки на элемент <a href="#somewhere">here</a> Это делает несколько вещей:

• 1: Пользователи знают, как использовать их уже
• 2: Добавляет в историю браузера, поэтому, если пользователь хочет нажать кнопку «Назад», он переводит их на предыдущую позицию страницы, а не на сайт, из которого они пришли.

Опять же, компоновка в ссылке намного более жидкая и не будет ухудшаться настолько плохо с настольными компьютерами разного размера. До тех пор, пока, конечно, вы не перейдете на мобильный, тогда вам нужно будет настроить с помощью @media запросов.

Кроме того, вы можете дополнительно добавить разницу в размере поля, если хотите. Используя единственный параметр в методе, вы можете указать число, которое компенсирует прокрутку. вы можете использовать, скажем, 100, и он получит дополнительные 100 пикселей после элемента или вы можете сказать -100, и он высадит 100 пикселей перед элементом.

Надеюсь, это поможет моему человеку. Любые вопросы, пожалуйста, не стесняйтесь спрашивать, и я настроюсь.