एक एचटीएमएल एंकर लिंक धीमा करें

Question

मैंने अन्य वेबसाइटों पर यह बहुत अच्छी सुविधा देखी है लेकिन मुझे यह खुद नहीं मिल रहा है।

मैं एक एंकर टैग स्क्रॉल के माध्यम से पृष्ठ के एक अलग हिस्से को एक लिंक बनाना चाहता हूं और न केवल वांछित आईडी पर कूदना चाहता हूं। मुझे लगता है कि एक जावास्क्रिप्ट फ़ाइल मदद कर सकती है या शायद एक सीएसएस संक्रमण हो सकता है लेकिन मुझे नहीं पता कि यह संक्रमण तत्व होगा।

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

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

धन्यवाद :)

Answer 1

कोई नहीं के बाद से वास्तव में इस सवाल का जवाब इससे पहले कि मैं लोग हैं, जो इसकी आवश्यकता के लिए मेरे खोज के साथ जवाब देंगे।

आपको बस इतना करना है इस

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

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

की तरह सामान्य लंगर लिंक तो यह जावा स्क्रिप्ट कोड जोड़ना है और आप मोबाइल पर कुछ भी बदलने की,

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