Писал плавную прокрутку вверх страницы и столкнулся с ошибкой: Uncaught TypeError: Cannot read properties of null (reading 'getTotalLength')

Question

HTML-код:

const offset = 100;
const scrollUp = document.querySelector('.scroll-up');
const scrollUpSvgPath = document.querySelector('.scroll-up_svg-path');
const pathLength = scrollUpSvgPath. ** getTotalLength() ** ;

scrollUpSvgPath.style.strokeDasharray = `${pathLength} ${pathLength}`;
scrollUpSvgPath.style.transition = 'stroke-dashoffset 20ms';

const getTop = () => window.pageYOffset || document.documentElement.scrollTop;

// updateDashoffset
const updateDashoffset = () => {
  const height = document.documentElement.scrollHeight - window.innerHeight;
  const dashoffset = pathLength - (getTop() * pathLength / height);

  scrollUpSvgPath.style.strokeDashoffset = dashoffset;
};

//onScroll
window.addEventListener('scroll', () => {
  updateDashoffset();

  if (getTop() > offset) {
    scrollUp.classList.add('scroll-up--active');
  } else {
    scrollUp.classList.remove('scroll-up--active');
  }
});

// click
scrollUp.addEventListener('click', () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
});

<div class="scroll-up">
  <svg class=".scroll-up_svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path class=".scroll-up_svg-path" d="  M12,22C6.5,22,2,17.5,2,12C2,6.5,6.5,2,12,2c5.5,0,10,4.5,10,10C22,17.5,17.5,22,12,22z 
              M12,4c-4.4,0-8,3.6-8,8 c0,4.4,3.6,8,8,8c4.4,0,8-3.6,8-8C20,7.6,16.4,4,12,4z">
             </path>
           </svg>
</div>

js: Ошибка в 4 строке Может кто-то знает как это решить?

Answer 1

Во первых уберите ** в 4-ой строке, а во вторых просто вместо <path class=".scroll-up_svg-path" используйте <path class="scroll-up_svg-path". Если честно не очень понятно зачем вам точки в имени класса, но если именно с точками надо то вам надо использовать вместо document.querySelector('.scroll-up_svg-path'); это document.getElementsByClassName('.scroll-up_svg-path')[0];. И то же самое относится к переменной const scrollUp = ...

Проблема сама в том что, когда вы пишите точку в функции querySelector то он ищет элемент, у которого есть класс с этим же названием, но без точки в начале. Ровно точно так же как и в CSS селекторах

Answer 2

behavior: 'smooth'` - не работает в Safari

Вот рабочий скрипт, только подставить свои данные.

const scrollWindow = () => {
// На сколько пикселей будет прокручиваться страница
    let scrolled;
    let timer;
//  Через сколько действие будет повторяться

//  Получаем еэлемент через ID
    document.getElementById(IDelemen).onclick = function(){
        scrolled = window.pageYOffset;
// Определяем место положение скролла на странице
    
// запуск функции    
        scrollToTop(); 
    }
//  Сама функции
    function scrollToTop(){
// Если положение скрола не вверху страницы
        if (scrolled > 0) {
//Скролим вверх 
            window.scrollTo(0, scrolled);
// Скроллим веерх (отнимаем кол-во пикселей от текущего значения) 
            scrolled = scrolled - 50; //100 - скорость прокрутки
            timer = setTimeout(scrollToTop, 200); //время повторения
// Через какое время запустить повторную проверку
// Повторение будет продолжаться, пока scrolled не станет - 0
        }
        else {
            clearTimeout(timer);
            window.scrollTo(0,0);
//Останавливаем по достижению верха страницы
        }
    }
}
// Вызов функкции
scrollWindow ();

// Регулировать плавность (прокрутной и повторением)

БЛОГ НА HUSL

Писал плавную прокрутку вверх страницы и столкнулся с ошибкой: Uncaught TypeError: Cannot read properties of null (reading 'getTotalLength')

Ответы (2 шт):