jquery를 사용하여 부드러운 스크롤 구현 3

Question

모두

부드럽게 같은 페이지 스크롤을 구현하려고하지만 지금까지 해결 방법이 없습니다. 내가 가진 최신 코드는 (내가 가지고있는 here) 아무것도하지 않습니다. 여기

기능 : https://jsfiddle.net/b5ueb9p3/

내가 완전히 뭔가를 분명 실종 : 바이올린에

이

$('a').click(function(){ 
    "use strict"; 
    $('html, body').animate({ 
     scrollTop: $($(this).attr('href')).offset().top 
    }, 500); 
    return false; 
}); 

링크? 내 코드에서는 jquery 3.2, popper 및 bootstrap (4 베타 2)에 연결합니다.

Answer 1

좋아요. 아래 코드를 다시 작성하여 해결했습니다. 원본 소스도 포함되어 있습니다. smoothScroll 함수에 작은 수정을 추가하여 내 탐색기 오프셋 (140)을 설명하고 앵커 위치를 설정하는 선을 주석 처리하여 위의 내용을 무효화합니다.

/* Smooth scrolling 
    Changes links that link to other parts of this page to scroll 
    smoothly to those links rather than jump to them directly, which 
    can be a little disorienting. 

    sil, http://www.kryogenix.org/ 

    v1.0 2003-11-11 
    v1.1 2005-06-16 wrap it up in an object 
*/ 

var ss = { 
    fixAllLinks: function() { 
    // Get a list of all links in the page 
    var allLinks = document.getElementsByTagName('a'); 
    // Walk through the list 

    for (var i=0;i<allLinks.length;i++) { 
     var lnk = allLinks[i]; 
     if ((lnk.href && lnk.href.indexOf('#') != -1) && 
      (!(lnk.classList.contains('noTouchy'))) && 
      ((lnk.pathname == location.pathname) || 
     ('/'+lnk.pathname == location.pathname)) && 
      (lnk.search == location.search)) { 
     // If the link is internal to the page (begins in #) 
     // then attach the smoothScroll function as an onclick 
     // event handler 
     ss.addEvent(lnk,'click',ss.smoothScroll); //all anchor points now have the smoothscroll function 
     } 
    } 
    }, 

    smoothScroll: function(e) { 
    // This is an event handler; get the clicked on element, 
    // in a cross-browser fashion 
    if (window.event) { 
     target = window.event.srcElement; 
    } else if (e) { 
     target = e.target; 
    } else return; 

    // Make sure that the target is an element, not a text node 
    // within an element 
    if (target.nodeName.toLowerCase() != 'a') { 
     target = target.parentNode; 
    } 

    // Paranoia; check this is an A tag 
    if (target.nodeName.toLowerCase() != 'a') return; 

    // Find the <a name> tag corresponding to this href 
    // First strip off the hash (first character) 
    anchor = target.hash.substr(1); 
    // Now loop all A tags until we find one with that name 
    var allLinks = document.getElementsByTagName('a'); 
    var destinationLink = null; 
    for (var i=0;i<allLinks.length;i++) { 
     var lnk = allLinks[i]; 
     if (lnk.name && (lnk.name == anchor)) { 
     destinationLink = lnk; 
     break; 
     } 
    } 
    if (!destinationLink) destinationLink = document.getElementById(anchor); 

    // If we didn't find a destination, give up and let the browser do 
    // its thing 
    if (!destinationLink) return true; 

    // Find the destination's position 
    var destx = destinationLink.offsetLeft; 
    var desty = destinationLink.offsetTop - 140; 
    var thisNode = destinationLink; 
    while (thisNode.offsetParent && 
      (thisNode.offsetParent != document.body)) { 
     thisNode = thisNode.offsetParent; 
     destx += thisNode.offsetLeft; 
     desty += thisNode.offsetTop; 
    } 

    // Stop any current scrolling 
    clearInterval(ss.INTERVAL); 

    cypos = ss.getCurrentYPos(); 

    ss_stepsize = parseInt((desty-cypos)/ss.STEPS); 
    ss.INTERVAL = 
setInterval('ss.scrollWindow('+ss_stepsize+','+desty+',"'+anchor+'")',10); 

    // And stop the actual click happening 
    if (window.event) { 
     window.event.cancelBubble = true; 
     window.event.returnValue = false; 
    } 
    if (e && e.preventDefault && e.stopPropagation) { 
     e.preventDefault(); 
     e.stopPropagation(); 
    } 
    }, 

    scrollWindow: function(scramount,dest,anchor) { 
    wascypos = ss.getCurrentYPos(); 
    isAbove = (wascypos < dest); 
    window.scrollTo(0,wascypos + scramount); //timing 
    iscypos = ss.getCurrentYPos(); 
    isAboveNow = (iscypos < dest); 
    if ((isAbove != isAboveNow) || (wascypos == iscypos)) { 
     // if we've just scrolled past the destination, or 
     // we haven't moved from the last scroll (i.e., we're at the 
     // bottom of the page) then scroll exactly to the link 

     window.scrollTo(0,dest); 
     // cancel the repeating timer 
     clearInterval(ss.INTERVAL); 
     // and jump to the link directly so the URL's right 
     //location.hash = anchor; 
    } 
    }, 

    getCurrentYPos: function() { 
    if (document.body && document.body.scrollTop) 
     return document.body.scrollTop; 
    if (document.documentElement && document.documentElement.scrollTop) 
     return document.documentElement.scrollTop; 
    if (window.pageYOffset) 
     return window.pageYOffset; 
    return 0; 
    }, 

    addEvent: function(elm, evType, fn, useCapture) { 
    // addEvent and removeEvent 
    // cross-browser event handling for IE5+, NS6 and Mozilla 
    // By Scott Andrew 
    if (elm.addEventListener){ 
     elm.addEventListener(evType, fn, useCapture); 
     return true; 
    } else if (elm.attachEvent){ 
     var r = elm.attachEvent("on"+evType, fn); 
     return r; 
    } else { 
     alert("Handler could not be removed"); 
    } 
    } 
} 

ss.STEPS = 25; 

ss.addEvent(window,"load",ss.fixAllLinks);