jQuery없이 부드러운 스크롤 앵커 링크

Question

jQuery없이 부드러운 스크롤을 사용하여 링크를 고정 할 수 있습니까? ? 새로운 사이트를 만들고 있는데 jQuery을 사용하고 싶지 않습니다.

Answer 1

여기에서 함수를 사용하여 :

function animate(elem, style, unit, from, to, time, prop) { 
    if (!elem) { 
     return; 
    } 
    var start = new Date().getTime(), 
     timer = setInterval(function() { 
      var step = Math.min(1, (new Date().getTime() - start)/time); 
      if (prop) { 
       elem[style] = (from + step * (to - from))+unit; 
      } else { 
       elem.style[style] = (from + step * (to - from))+unit; 
      } 
      if (step === 1) { 
       clearInterval(timer); 
      } 
     }, 25); 
    if (prop) { 
      elem[style] = from+unit; 
    } else { 
      elem.style[style] = from+unit; 
    } 
} 

window.onload = function() { 
    var target = document.getElementById("div5"); 
    animate(document.scrollingElement || document.documentElement, "scrollTop", "", 0, target.offsetTop, 2000, true); 
}; 

DEMO :https://jsfiddle.net/zpu16nen/

만들기 JavaScript animation 및 속성 (뿐만 아니라 스타일의 속성을) 수정을 수정, 당신은 이런 식으로 뭔가를 시도 할 수 있습니다 창 크기를 충분히 작게 설정하여 실제로 스크롤 막대가 생기고 5 번째 div로 스크롤 할 수 있습니다.

아니요, jQuery의 25 %를 재 작성하지 않아도됩니다.

이것은 분명히 질문이 실제로 의미하는 바에 따라 (예 : 창 해시가 변경 될 때 등) 크게 수정 될 필요가 있습니다. jQuery를 함께, 그것은 쉽게 있다는

는

참고로 :

$(document).ready(function() { 
    $("html, body").animate({ 
     scrollTop: $("#div5").offset().top 
    }, 2000); 
}); 

DEMO :http://jsfiddle.net/7TAa2/1/

그냥 :target 선택기

Answer 2

CSS3 전환 좋은 결과를 제공 할 수 있습니다 ... 말 JS 해킹없이. 나는 이것을 구현할지를 고려하고 있었지만 Jquery 없이는 약간 지저분해진다. 자세한 내용은 this question을 참조하십시오.

Answer 3

이 답변 확장 : scrollTo의 함수를 정의한 후 https://stackoverflow.com/a/8918062/3851798

을, 당신은 당신이 함수에서 scrollTo 할 요소를 전달할 수 있습니다.

function scrollTo(element, to, duration) { 
    if (duration <= 0) return; 
    var difference = to - element.scrollTop; 
    var perTick = difference/duration * 10; 

    setTimeout(function() { 
     element.scrollTop = element.scrollTop + perTick; 
     if (element.scrollTop === to) return; 
     scrollTo(element, to, duration - 10); 
    }, 10); 
} 

당신은 ID = "바닥 글"당신은 당신이 실행할 수있는 스크롤 실행 스크립트에서

<div id="footer" class="categories">…</div> 

와 사업부, 거기에 당신이

elmnt = document.getElementById("footer"); 
scrollTo(document.body, elmnt.offsetTop, 600); 

그리고이있는 경우 그것. jQuery없이 부드러운 스크롤. 실제로 브라우저의 콘솔에서 해당 코드로 놀고 원하는대로 미세 조정할 수 있습니다.

Answer 4

이 자바 스크립트 라이브러리를 사용하여 모든 내부 링크에 부드러운 스크롤을 추가 할 수 있습니다. 무시할 링크를 제공하기 위해 구성을 추가 할 수도 있습니다. 자세한 내용은 여기를 참조하십시오. https://codingninjascodes.github.io/SmoothScrollJs/

Answer 5

순수 경량 자바 스크립트 라이브러리 : 사실 smooth-scroll on github

Answer 6

, 그렇게 더 가볍고 간단한 방법이있다 : https://codepen.io/ugg0t/pen/mqBBBY

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

 
document.getElementById("button").addEventListener('click',() => { 
 
    scrollTo(document.getElementById("8")); 
 
});

div { 
 
    width: 100%; 
 
    height: 200px; 
 
    background-color: black; 
 
} 
 

 
div:nth-child(odd) { 
 
    background-color: white; 
 
} 
 

 
button { 
 
    position: absolute; 
 
    left: 10px; 
 
    top: 10px; 
 
}

<div id="1"></div> 
 
<div id="2"></div> 
 
<div id="3"></div> 
 
<div id="4"></div> 
 
<div id="5"></div> 
 
<div id="6"></div> 
 
<div id="7"></div> 
 
<div id="8"></div> 
 
<div id="9"></div> 
 
<div id="10"></div> 
 
<button id="button">Button</button>

Answer 7

사용이 :

가

let element = document.getElementById("box"); 

element.scrollIntoView(); 
element.scrollIntoView(false); 
element.scrollIntoView({block: "end"}); 
element.scrollIntoView({behavior: "instant", block: "end", inline: "nearest"}); 

DEMO : https://jsfiddle.net/anderpo/x8ucc5ak/1/

Answer 8

내가 가장 좋아하는 스크롤에 라이브러리가 현재 때문에 wide range of features와 작은 크기 (현재는 3.17kb)의 Zenscroll입니다.

앞으로는 scrollIntoView 네이티브 기능을 사용하는 것이 더 적절할 수 있지만, IE 지원이 없기 때문에 현재 대부분의 제작 사이트에서 폴리 필링해야하므로 모든 경우에 Zenscroll을 사용하는 것이 좋습니다.