Làm chậm liên kết anchor html

Question

Tôi đã thấy tính năng khá thú vị này trên các trang web khác nhưng tôi dường như không thể tự tìm thấy nó.

Tôi muốn tạo một liên kết đến một phần khác của trang thông qua một thẻ liên kết cuộn và không chỉ chuyển đến id mong muốn. Tôi cho rằng một tập tin javascript có thể giúp hoặc có thể là một quá trình chuyển đổi css nhưng tôi không biết rằng yếu tố chuyển đổi nó sẽ được.

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

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

Cảm ơn :)

Answer 1

Vì không ai thực sự đã trả lời câu hỏi này trước khi tôi sẽ trả lời với khám phá của tôi cho những người cần nó.

Tất cả bạn phải làm là liên kết anchor bình thường như thế này

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

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

sau đó thêm mã JavaScript này và nếu bạn cần thay đổi bất cứ điều gì, hãy nhìn vào những ý kiến ​​javascript

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