JavaScript 스크롤 막대 위치 가져오기 및 앵커 포인트로 페이지 슬라이딩

5094 단어 JavaScript스크롤 바페이지미끄러지다닻점

앞말


이 글은 최근 업무에서 겪은 문제점을 기록한다. 앱의 원생과 앞부분 h5가 혼합 개발되는 과정에서 그 중의 한 페이지는 도시 목록을 선택하는 페이지이다. 미단이 배고프냐 도시 선택, 은행 앱에서 은행 목록 선택, 주소록에서 연락처가 선택한 닻 위치 등 이런 기능을 신속하게 포지셔닝하는 것과 유사하다. 입문한 지 얼마 되지 않은 나로서는 이 기능이 약간의 스트레스를 느낀다.다음은 제가 찾아낸 실현 방법을 공유해 보겠습니다.

닻점 문제


pc측 웹 페이지에 대해 말하자면 흔히 볼 수 있는 웹 페이지 오른쪽의 맨 위로 돌아가는 단추를 누르면 바로 웹 페이지 맨 위로 이동하는 것이 바로 닻점의 실현이다.
이동단에 대해 말하자면 당신의 핸드폰 주소록을 열고 오른쪽의 알파벳을 클릭하면 페이지가 해당 알파벳의 연락처로 바로 이동하는 것도 닻점의 실현이다.

일반적인 해결 방법


1. <a> 탭에서 href 속성이 점프 요소로 설정된 id의 값


<style>
    #mydiv{
      height: 1200px;
      width: 100%;
      background-color: pink;
      position: relative;
    }
    a{
      position: absolute;
      top: 1000px;
      left: 1000px;
    }
 　　</style>
  <div id="mydiv">
     
  </div>
  <a href="#mydiv" rel="external nofollow" > </a>
위의 방법은 하이퍼링크를 설정하고 a탭을 직접 돌리는 것과 맞지만, 이렇게 브라우저 주소 표시줄의 주소를 바꾸는 것은 그다지 실용적이지 않다고 느낀다

2. 원생 js가 스크롤 막대 위치를 가져오고 scrollTop을 변경합니다


<style>
    body{
      position: relative;
    }
    h1{
      margin: 0 auto;
    }
    .mybtn1{
      position: fixed;
      left: 200px;
      top: 500px;
    }
    .mybtn2{
      position: fixed;
      left: 200px;
      top: 550px;
    }
  </style>
　　<body>
  　　 <h1 id="topH1">1</h1>
  　　<h1>2</h1>
  　　<h1>3</h1>
  　　<h1>4</h1>
  　　<h1>5</h1>
  　　<h1>6</h1>
  　　 <h1>7</h1>
  　　 <h1>1</h1>
  　　<h1>2</h1>
  　　 <h1>3</h1>
  　　 <h1>4</h1>
  　　 <h1>5</h1>
  　　<h1>6</h1>
  　　<h1>7</h1>
  　　 <h1>1</h1>
  　　<h1>2</h1>
  　　<h1>3</h1>
  　　<h1>4</h1>
  　　<h1>5</h1>
  　　<h1>6</h1>
  　　 <h1 id="tobtmH1">7</h1>
  <button class="mybtn1"  onclick="toTop()"> </button>
  <script>
   function toTop(){
    var topH1 = document.getElementById("topH1")
    document.documentElement.scrollTop=topH1.offsetTop 
    window.pageYOffset=topH1.offsetTop 
    document.body.scrollTop=topH1.offsetTop ;
    
   }
  </script> 
　　</body>
이런 방법은 버튼에 클릭 이벤트를 추가하고 클릭 이벤트를 터치한 후 스크롤 바의 위치를 바꾸는 것이다. 그러나 이런 방법은 호환형 문제를 처리하는 것이 비교적 번거로우며 pc단 이동단이 직접 측정하는 것이 효과적이다.

3.element.scrollIntoview는 스크롤 막대를 보기에 따라 변화시킵니다.


<style>
    body{
      position: relative;
    }
    .mydiv{
      margin-top: 100px;
      border: 1px solid pink;
    }
    h1{
      margin: 0 auto;
    }
    .mybtn1{
      position: fixed;
      left: 200px;
      top: 500px;
    }
    .mybtn2{
      position: fixed;
      left: 200px;
      top: 550px;
    }
</style>
<body>
  <div class="mydiv">
  <h1 id="topH1">1</h1>
  <h1>2</h1>
  <h1>3</h1>
  <h1>4</h1>
  <h1>5</h1>
  <h1>6</h1>
  <h1>7</h1>
  <h1>1</h1>
  <h1>2</h1>
  <h1>3</h1>
  <h1>4</h1>
  <h1>5</h1>
  <h1>6</h1>
  <h1>7</h1>
  <h1>1</h1>
  <h1>2</h1>
  <h1>3</h1>
  <h1>4</h1>
  <h1>5</h1>
  <h1>6</h1>
  <h1 id="tobtmH1">7</h1>
</div>
  <button class="mybtn1"  onclick="toTop()"> </button>
  <button class="mybtn2" onclick="toBtm()"> </button>
  <script>
    window.onload=function(){

    }
  //  element.scrollIntoview()
  // true ， ， element 
  // false ， element 
    function toTop(){
      var topH1 = document.getElementById('topH1')
      topH1.scrollIntoView(true)
    }
    function toBtm() {
      var tobtmH1 = document.getElementById('tobtmH1')
      tobtmH1.scrollIntoView(false)
    }
  </script> 
</body>
위의 이런 방법은 닻점을 보기의 꼭대기나 밑부분으로 돌리는 것이다. 폐단이 많지 않고 pc단 이동단이 직접 측정하는 것이 효과적이다.

진급의 해결 방법


진급 방법은 바로 세 번째 플러그인better-scroll을 호출하는 것이다. 이런 방법은 아직 직접 측정하지 않았고 자료를 봐도 구덩이가 많지 않기 때문에 필요한 것은 스스로 추가하여 사용한다.
다음은 자바스크립트가 스크롤 바의 위치를 얻고 페이지를 닻점으로 슬라이딩하는 상세한 내용입니다. 자바스크립트 스크롤 바를 닻점으로 슬라이딩하는 것에 대한 더 많은 자료는 저희 다른 관련 글을 주목해 주십시오!
Java의 String 객체 데이터 유형 전체 분석
프로그래머스 네트워크 파이썬

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage