Как плавно проскролить страницу вниз до опреденного элемента?

222

10 апреля 2022, 02:10

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

$(document).ready(function() { 
  $('a[href^="#"], a[href^="."]').click(function(e) { 
    var scrоll_el = $(this).attr('href'); 
    if ($(scroll_el).length != 0) { 
      $('html, body').animate({ 
        scrollTop: $(scroll_el).offset().top 
      }, 500); 
    } 
    e.preventDefault(); 
  }); 
});

.one, 
.two { 
  width: 100%; 
  height: 100vh; 
} 
 
.one { 
  background-color: chocolate; 
} 
 
.two { 
  background-color: gold; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="one"><a href="#gold">Ссылка</a></div> 
<div id="gold" class="two">Элемент</div>

Answer 1

Ваш код рабочий, ошибка в опечатке в названии переменной scrоll_el (вероятно русские символы)

Примеры плавного скролла с использование jquery оставлю:

Пример:

$('.flowing-scroll').on('click', function() { 
  var el = $(this); 
  var dest = el.attr('href'); // получаем направление 
  if (dest !== undefined && dest !== '') { // проверяем существование 
    $('html').animate({ 
        scrollTop: $(dest).offset().top // прокручиваем страницу к требуемому элементу 
      }, 500 // скорость прокрутки 
    ); 
  } 
  return false; 
});

.one, 
.two { 
  width: 100%; 
  height: 100vh; 
} 
 
.one { 
  background-color: chocolate; 
} 
 
.two { 
  background-color: gold; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<div class="one"><a href="#goToMe" class="flowing-scroll other-class">Ссылка</a></div> 
<div id="goToMe" class="two">Элемент</div>

Ваш код в рабочем виде:

$(document).ready(function() { 
  $('a[href^="#"], a[href^="."]').click(function(e) { 
    var scrоll_el = $(this).attr('href'); 
    if ($(scrоll_el).length != 0) { 
      $('html, body').animate({ 
        scrollTop: $(scrоll_el).offset().top 
      }, 500); 
    } 
    e.preventDefault(); 
  }); 
});

.one, 
.two { 
  width: 100%; 
  height: 100vh; 
} 
 
.one { 
  background-color: chocolate; 
} 
 
.two { 
  background-color: gold; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="one"><a href="#gold">Ссылка</a></div> 
<div id="gold" class="two">Элемент</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Может ли mysqldump сломать базу?

Появилась необходимость делать дампы MySQL базы не реже, чем раз в час (лучше - еще чаще)Планирую это делать через mysqldump, который будет запускаться...

173

Java