Spowolnienie html link link

Question

Widziałem tę całkiem fajną funkcję na innych stronach internetowych, ale nie mogę znaleźć go sam.

Chcę utworzyć łącze do innej części strony za pomocą przewijanego znacznika kotwicy, a nie tylko przejść do żądanego identyfikatora. Przypuszczam, że plik javascript może pomóc, a może przejście z css, ale nie wiem, jaki byłby element przejściowy.

<a href="#bottom">scroll to bottom</a> 

<p id="bottom">bottom</p> 

Dzięki :)

Answer 1

Ponieważ nikt tak naprawdę nie odpowiedział na to pytanie, zanim ja odpowiem z mojego odkrycia dla ludzi, którzy jej potrzebują.

Wszystko co musisz zrobić, to normalne linki anchor podobnych

<a href="#bottom">scroll to bottom</a> 

<p id="bottom">bottom</p> 

następnie dodać ten kod JavaScript i jeśli trzeba nic zmieniać, spojrzeć na Javascript komentarzach

<script> 
    $(function() { 

     function filterPath(string) { 
      return string 
      .replace(/^\//,'') 
      .replace(/(index|default).[a-zA-Z]{3,4}$/,'') 
      .replace(/\/$/,''); 
     } 

     var locationPath = filterPath(location.pathname); 
     var scrollElem = scrollableElement('html', 'body'); 

     // Any links with hash tags in them (can't do ^= because of fully qualified URL potential) 
     $('a[href*=#]').each(function() { 

      // Ensure it's a same-page link 
      var thisPath = filterPath(this.pathname) || locationPath; 
      if ( locationPath == thisPath 
       && (location.hostname == this.hostname || !this.hostname) 
       && this.hash.replace(/#/,'')) { 

        // Ensure target exists 
        var $target = $(this.hash), target = this.hash; 
        if (target) { 

         // Find location of target 
         var targetOffset = $target.offset().top; 
         $(this).click(function(event) { 

          // Prevent jump-down 
          event.preventDefault(); 

          // Animate to target 
          $(scrollElem).animate({scrollTop: targetOffset}, 400, function() { 

           // Set hash in URL after animation successful 
           location.hash = target; 

          }); 
         }); 
        } 
      } 

     }); 

     // Use the first element that is "scrollable" (cross-browser fix?) 
     function scrollableElement(els) { 
      for (var i = 0, argLength = arguments.length; i <argLength; i++) { 
       var el = arguments[i], 
       $scrollElement = $(el); 
       if ($scrollElement.scrollTop()> 0) { 
        return el; 
       } else { 
        $scrollElement.scrollTop(1); 
        var isScrollable = $scrollElement.scrollTop()> 0; 
        $scrollElement.scrollTop(0); 
        if (isScrollable) { 
         return el; 
        } 
       } 
      } 
      return []; 
     } 

    }); 
    </script>