Анар Лятифов

Если я вас правильно понял то вам нужно что-то такое:

<h1 class="Name preName">GGG</h1>
<p class="Family preSurname">JJJJJJJ</p>


<form class="container">
  <input type="text" name="profileName" class="newName inputName" placeholder="Имя" value="Текст">
  <input type="text" name="aboutMe" class="newFamily inputSurname" placeholder="Фамилия" value="Текст">
  <button type class="button">Сохранить</button>
</form>

и js:

//Находим элементы "вёрстки"
let name = document.querySelector(".preName")
let surname = document.querySelector(".preSurname")

//Находим инпуты
let inputName = document.querySelector(".inputName")
let inputSurname = document.querySelector(".inputSurname")

// Проверяем если элемент не пуст то его содержимое помещаем в инпут
if (name.innerHTML() !== "") {
    inputName.value = name.innerHTML();
}

// или можно записать ещё короче

inputSurname.value = (surname.innerHTML() !== "") ? surname.innerHTML() : "";

Просто используйте .scrollTop не на окне, а на самом .page__wrapper.

let amountScrolled = 100;

    $(".page__wrapper").scroll(function() {
      if ( $(".page__wrapper").scrollTop() > amountScrolled ) {
        $('.arrow-up').fadeIn('slow');
      } else {
        $('.arrow-up').fadeOut('slow');
      }
    });

    $('.arrow-up').on('click', function() {
      // alert(111);
      $('.page__wrapper').animate({
        scrollTop: 0
      }, 700);
      return false;
    });