> 웹 프론트엔드 > JS 튜토리얼 > 구현 code_jquery 없이 페이지의 지정된 위치로 원활하게 스크롤할 수 있습니다.

구현 code_jquery 없이 페이지의 지정된 위치로 원활하게 스크롤할 수 있습니다.

WBOY
풀어 주다: 2016-05-16 17:34:20
원래의
1391명이 탐색했습니다.

앵커링 없이 페이지의 지정된 위치로 부드럽게 스크롤할 수 있습니다

코드 복사 코드는 다음과 같습니다



> ScrollTo: 페이지의 지정된 위치로 부드럽게 스크롤합니다

< ;style type="text/css">
.nav{width:500px;margin:10px auto;}
.nav li{float:left height; :24px; 줄 높이: 24px}
.box{height:500px}
.box h3{height:32px; line-height:32px; 글꼴 크기:14px} >.clear{clear:both }
html,body,div,span,h1,h2,h3,h4,h5,h6,p,pre,a,code,em,img,small,strong,sub,sup ,u,i,center, dl,dt,dd,ol,ul,li,fieldset,form,label{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical- 정렬:기준선;배경:투명 }
a{색상:#007bc4/*#424242*/; 텍스트 장식:없음;}
a:hover{text-장식:밑줄}
ol,ul {list-style:none}
테이블{border-collapse:collapse;border-spacing:0}
body{height:100%;font:12px/18px "Microsoft Yahei", Tahoma, Helvetica, Arial, Verdana, "5b8b4f53", sans -serif; 색상:#51555C; 배경:#162934 url(../images/body_bg.gif) 반복-x}
img{border:none}
#main{width :910px; 최소 높이: 600px; 여백:30px 자동 0 자동; -moz-border-radius:12px;-khtml-border-radius: 12px; radius:12px;}
h2.top_title{margin:4px 20px; padding-left:20px; border-bottom:1px 글꼴 크기:18px; color:#a84c10;}


<스크립트 유형= "텍스트/자바스크립트">
$(function(){
$(".nav_pro").click(function(){
$.scrollTo('#pro',500);
});
$(".nav_news").click(function(){
$.scrollTo('#news',800);
}); ").click(function( ){
$.scrollTo('#ser',1000);
});
$(".nav_con").click(function(){
$.scrollTo('#con ',1200);
})
$(".nav_job").click(function(){
$.scrollTo('#job',1500);
})
});

>

ScrollTo: 페이지의 지정된 위치로 부드럽게 스크롤합니다




>

;제품 전시




뉴스 센터




서비스 지원

< ;div id="con" class="box">

문의하기




인재 모집








JS 플러그인: 스크롤
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿