Bir html bağlantı bağlantısını yavaşlatın

Question

Bu oldukça güzel özelliği diğer web sitelerinde gördüm ancak kendimi bulamıyorum.

Sayfanın farklı bir bölümüne bir bağlantı etiketi kaydırmasıyla bağlantı kurmak ve yalnızca istenen kimliğe atlamak istemiyorum. Bir javascript dosyası yardımcı olabilir veya belki bir css geçişi varsayalım ama geçiş elemanının olacağını bilmiyorum. Ona ihtiyacım insanlar için benim keşfiyle cevap olacak önce

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

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

Teşekkür :) kimse bu yana

Answer 1

gerçekten bu soruyu cevapladı.

yapmanız gereken tek şey

bu

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

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

gibi normal içi bağlantıları daha sonra bu Javascript kodu eklemek ve bunu mobil cihazlarda

<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>