jquery 부드러운 스크롤을 앵커로?

jquery 부드러운 스크롤을 앵커로?

---

jQuery를 사용하여 앵커 링크로 스크롤하는 방법이 있습니까?

처럼:

$(document).ready(function(){
  $("#gotomyanchor").click(function(){
      $.scrollSmoothTo($("#myanchor"));
  });
});

?

---

방법은 다음과 같습니다.

    var hashTagActive = "";
    $(".scroll").on("click touchstart" , function (event) {
        if(hashTagActive != this.hash) { //this will prevent if the user click several times the same link to freeze the scroll.
            event.preventDefault();
            //calculate destination place
            var dest = 0;
            if ($(this.hash).offset().top > $(document).height() - $(window).height()) {
                dest = $(document).height() - $(window).height();
            } else {
                dest = $(this.hash).offset().top;
            }
            //go to destination
            $('html,body').animate({
                scrollTop: dest
            }, 2000, 'swing');
            hashTagActive = this.hash;
        }
    });

그런 다음 다음과 같이 앵커를 만들어야합니다.

<a class="scroll" href="#destination1">Destination 1</a>

내 웹 사이트 에서 볼 수 있습니다 . http://jsfiddle.net/YtJcL/
에서 데모도 사용할 수 있습니다.

---

CSS-Tricks.com의 간단한 코드 스 니펫을 사용합니다.

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

출처 : http://css-tricks.com/snippets/jquery/smooth-scrolling/

---

지금까지 본 최고의 솔루션 : jQuery : Smooth Scrolling Internal Anchor Links

HTML :

<a href="#comments" class="scroll">Scroll to comments</a>

스크립트:

jQuery(document).ready(function($) {
    $(".scroll").click(function(event){     
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
    });
});

---

jQuery.scrollTo 는 당신이 원하는 모든 것을 할 것입니다!

모든 종류의 다른 것을 전달할 수 있습니다.

• 원시 숫자
• 문자열 ( '44', '100px', '+ = 30px'등)
• DOM 요소 (논리적으로 스크롤 가능 요소의 자식)
• 스크롤 가능한 요소에 상대적인 선택기
• 끝으로 스크롤 할 문자열 'max'입니다.
• 컨테이너의 해당 부분으로 스크롤 할 백분율을 지정하는 문자열입니다 (fe : 50 %는 *에서 중간으로 이동).
• 해시 {top : x, left : y}, x 및 y는 위와 같이 모든 종류의 숫자 / 문자열이 될 수 있습니다.

---

다음은 jQuery scrollTo를 모든 앵커 링크에 빠르게 바인딩하는 데 사용한 코드입니다.

// Smooth scroll
$('a[href*=#]').click(function () {
    var hash = $(this).attr('href');
    hash = hash.slice(hash.indexOf('#') + 1);
    $.scrollTo(hash == 'top' ? 0 : 'a[name='+hash+']', 500);
    window.location.hash = '#' + hash;
    return false;
});

---

내가 근무 버전을 원 <a href="#my-id">하고<a href="/page#my-id">

<script>        
    $('a[href*=#]:not([href=#])').on('click', function (event) {
        event.preventDefault();
        var element = $(this.hash);
        $('html,body').animate({ scrollTop: element.offset().top },'normal', 'swing');
    });
</script>

---

이걸로 해봐. 내가 수정 한 CSS 트릭의 코드로, 매우 간단하며 수평 및 수직 스크롤을 모두 수행합니다. JQuery가 필요합니다. 다음은 데모입니다.

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top-10, scrollLeft:target.offset().left-10
        }, 1000);
        return false;
      }
    }
  });
});

---

hanoo의 스크립트를 사용 하여 jQuery 함수를 만들었습니다.

$.fn.scrollIntoView = function(duration, easing) {
    var dest = 0;
    if (this.offset().top > $(document).height() - $(window).height()) {
        dest = $(document).height() - $(window).height();
    } else {
        dest = this.offset().top;
    }
    $('html,body').animate({
        scrollTop: dest
    }, duration, easing);
    return this;
};

용법:

$('#myelement').scrollIntoView();

기간 및 여유의 기본값은 400ms 및 "스윙"입니다.

---

내 사이트에서 다음을 사용했습니다.

$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
    e.preventDefault();

    var target = this.hash,
    $target = $(target);

    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 1200, 'swing', function () {
        window.location.hash = target;
    });
});

});

You could change the speed of the scrolling changing the "1200" i used by default, it works fairly well on most of the browsers.

after putting the code between the <head> </head> tag of your page, you will need to create the internal link in your <body> tag:

<a href="#home">Go to Home</a>

Hope it helps!

Ps: Dont forget to call:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

---

I used the plugin Smooth Scroll, at http://plugins.jquery.com/smooth-scroll/. With this plugin all you need to include is a link to jQuery and to the plugin code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="javascript/smoothscroll.js"></script>

(the links need to have the class smoothScroll to work).

Another feature of Smooth Scroll is that the ancor name is not displayed in the URL!

---

works

$('a[href*=#]').each(function () {
    $(this).attr('href', $(this).attr('href').replace('#', '#_'));
    $(this).on( "click", function() {

        var hashname = $(this).attr('href').replace('#_', '');

        if($(this).attr('href') == "#_") {
            $('html, body').animate({ scrollTop: 0 }, 300);
        }
        else {
            var target = $('a[name="' + hashname + '"], #' + hashname),
                targetOffset = target.offset().top;
            if(targetOffset >= 1) {
                $('html, body').animate({ scrollTop: targetOffset-60 }, 300);
            }
        }
    });
});

---

I hate adding function-named classes to my code, so I put this together instead. If I were to stop using smooth scrolling, I'd feel behooved to go through my code, and delete all the class="scroll" stuff. Using this technique, I can comment out 5 lines of JS, and the entire site updates. :)

<a href="/about">Smooth</a><!-- will never trigger the function -->
<a href="#contact">Smooth</a><!-- but he will -->
...
...
<div id="contact">...</div>


<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    // Smooth scrolling to element IDs
    $('a[href^=#]:not([href=#])').on('click', function () {
        var element = $($(this).attr('href'));
        $('html,body').animate({ scrollTop: element.offset().top },'normal', 'swing');
        return false;
    });
</script>

Requirements:
1. <a> elements must have an href attribute that begin with # and be more than just #
2. An element on the page with a matching id attribute

What it does:
1. The function uses the href value to create the anchorID object
   - In the example, it's $('#contact'), /about starts with /
2. HTML, and BODY are animated to the top offset of anchorID
   - speed = 'normal' ('fast','slow', milliseconds, )
   - easing = 'swing' ('linear',etc ... google easing)
3. return false -- it prevents the browser from showing the hash in the URL
   - the script works without it, but it's not as "smooth".

참고URL : https://stackoverflow.com/questions/4198041/jquery-smooth-scroll-to-an-anchor