I Shar

I Shar

мир глазами веб-разработчика

Скролл в начало страницы

Простой способ сделать скролл в начало страницы

I Shar

время чтения 1 мин.

Несомненно, для реализации механизма возврата в начало страницы самый простой и очевидный способ: добавить идентификатор для тега html и сделать на него ссылку перед закрывающим

. Например так:


  
     
     Вверх

Но и в таком случае, существуют опции, использование которых сделает сайт более привлекательным.

Чтобы прокручивание было гладким, добавим CSS свойство:

html {
  scroll-behavior: smooth;
}

Использование идентификатора для тега html - простой и эффективный способ, но он ведет к потере контроля над страницей.

Используем дополнительный элемент:


  
     
     
     Вверх
  

Привязка идентификатора к дополнительному элементу позволит сделать возврат к началу страницы с помощью клавиатуры. Хотя в этом случае может потребоваться запустить прокрутку в ответ на клик с помощью JS:


window.scrollTo(0, 0);




Гладкое прокручивание в таком случае можно реализвать с помощью CSS, как описано выше, или добавить в JS:


window.scroll({
  top: 0,
  left: 0,
  behavior: 'smooth'
});






Спасибо за внимание

  
  

    
    
      
  • 
        
      
            
    • 
frontend

      • 
        
    
      
    • 
      
  • 
        
      
            
    • 
html

      • 
            
    • 
css

      • 
            
    • 
js

      • 
        
    
      
    • 


  


      
      

  

  

  

    

      
Новые публикации

    

    
    
    
    
    
    Далее
  

  

    

      

Категории


    

    
  

  

  

  

    

      
О нас

    

    
Frontend & Backend. Статьи, обзоры, заметки, код, уроки.

    
  



      

      
  

      Copyright © 2021-
        I Shar
    . 

    мир глазами веб-разработчика