snipt

Ctrl+h for KB shortcuts

Text only

Smooth Scroll - inPage

<a href="#bottom" woosh class="scroll">Contact</a>

<span id="bottom"></span



//
//In page smooth scroll
//

jQuery(document).ready(function($) {
    $(".scroll").click(function(event){     
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 1500);
    });
});
https://snipt.net/embed/3095094b6dfa11c15cd12b7bbd36c793/
/raw/3095094b6dfa11c15cd12b7bbd36c793/
3095094b6dfa11c15cd12b7bbd36c793
text
Text only
17
2019-08-18T21:32:10
True
False
False
Dec 23, 2015 at 05:33 PM
/api/public/snipt/143273/
smooth-scroll-inpage
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1"> 1</a> <a href="#L-2"> 2</a> <a href="#L-3"> 3</a> <a href="#L-4"> 4</a> <a href="#L-5"> 5</a> <a href="#L-6"> 6</a> <a href="#L-7"> 7</a> <a href="#L-8"> 8</a> <a href="#L-9"> 9</a> <a href="#L-10">10</a> <a href="#L-11">11</a> <a href="#L-12">12</a> <a href="#L-13">13</a> <a href="#L-14">14</a> <a href="#L-15">15</a> <a href="#L-16">16</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a>&lt;a href=&quot;#bottom&quot; woosh class=&quot;scroll&quot;&gt;Contact&lt;/a&gt; </span><span id="L-2"><a name="L-2"></a> </span><span id="L-3"><a name="L-3"></a>&lt;span id=&quot;bottom&quot;&gt;&lt;/span </span><span id="L-4"><a name="L-4"></a> </span><span id="L-5"><a name="L-5"></a> </span><span id="L-6"><a name="L-6"></a> </span><span id="L-7"><a name="L-7"></a>// </span><span id="L-8"><a name="L-8"></a>//In page smooth scroll </span><span id="L-9"><a name="L-9"></a>// </span><span id="L-10"><a name="L-10"></a> </span><span id="L-11"><a name="L-11"></a>jQuery(document).ready(function($) { </span><span id="L-12"><a name="L-12"></a> $(&quot;.scroll&quot;).click(function(event){ </span><span id="L-13"><a name="L-13"></a> event.preventDefault(); </span><span id="L-14"><a name="L-14"></a> $(&#39;html,body&#39;).animate({scrollTop:$(this.hash).offset().top}, 1500); </span><span id="L-15"><a name="L-15"></a> }); </span><span id="L-16"><a name="L-16"></a>}); </span></pre></div> </td></tr></table>
html, jQuery, js
--- 
+++ 
@@ -0,0 +1,16 @@
+<a href="#bottom" woosh class="scroll">Contact</a>
+
+<span id="bottom"></span
+
+
+
+//
+//In page smooth scroll
+//
+
+jQuery(document).ready(function($) {
+    $(".scroll").click(function(event){     
+        event.preventDefault();
+        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 1500);
+    });
+});
  • Sirat
  • 3 years, 7 months ago