개발하는 루루언니

CSS : scroll-begavior 스무스 하게 스크롤 내리기 본문

컴퓨터 정보/css

CSS : scroll-begavior 스무스 하게 스크롤 내리기

혜닝혜루 2022. 11. 28. 10:19
728x90
반응형

scroll-begavior 

 

 

 

 

 

 scroll-behavior: smooth;

스타일에 html . { } 안에 넣어주면 a태그 클릭시 다 스무스 하게 된다.

단. 인터넷익스프로에서는 사용이 안되고 모바일에서만 기능구현 할거면 해도됨 단 속도조절 x

or

 

제이쿼리를 이용해서 해도 되는데 아래 코드는 script 에 들어가야 한다. 

얘는 속도 조절이 가능하다. = > 아래코드를 외울 필요는 없고 필요할때 써먹으면 된다.

$('식별자')만 잘 지정해 주면 된다. 식별자 안에는 클레스 이름을 넣어도 되고 header a 이런식으로 넣어도 된다.

<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
</head>

<script>
$('.content').click(function(){
   $.scrollTo(this.hash || 0, 900 )
   e.preventDefault()
});
</script>
  1.  

 

또한 head안에 이렇게 jquery를 사용한다는 걸 표시해 줘야 합니다.

728x90

'컴퓨터 정보 > css' 카테고리의 다른 글

CSS : nth-child 와 nth-of-type 을 구별해서 사용하기  (0) 2022.11.29
CSS : 반응형 레이아웃 그리드 (Grid)  (0) 2022.11.28
css: a태그로 특정위치 이동하기 ( id 속성 이용 #)  (0) 2022.11.20
css : line-height 위아래 줄간격  (0) 2022.11.18
CSS : transition 부드럽게 일정시간에 맞춰 효과  (0) 2022.11.18
'컴퓨터 정보/css' Related Articles more