The use of smooth scrolling--smooth-scroll.js in the page

Normal this page anchor link to jump when the same as PPT, especially blunt, the user experience is very poor.

At this time we can use smooth-scroll.js This plugin, to achieve a smooth jump on this page.

1 First, import the necessary JS file

<script src= "Js/jquery-1.10.2.js" ></script> <script src= "Js/jquery.smooth-scroll.min.js" ></ script> <script src= "Js/jquery.ba-bbq.js" ></script>

2 We can call plugins like this.

$ (' a '). Smoothscroll ({});

3 You can specify an external container according to your needs, so scrolling occurs within this (#container) container, not at the page level.

$ (' #container a '). Smoothscroll ();

4 We can exclude the containing element of the specified container in the following way

$ (' #container a '). Smoothscroll ({     excludewithin: ['. Container2 ']});

5 Use the following statement to exclude elements that meet the specified criteria

$ (' a '). Smoothscroll ({    exclude: ['. Rough ', ' #chunky ']});

6 adjust the slide to which position to stop

$ ('. BackToTop '). Smoothscroll ({   -100});

7 set a callback function before the swipe starts

$ (' a '). Smoothscroll ({   function() {      alert (' ready to go! ' );     }});

8 set a sliding-end callback function

$ (' a '). Smoothscroll ({  function() {     alert (' we made it! ') );   }});

You can also configure your own parameters

$.smoothscroll ({//offset of the position to slide tooffset:0,  //sliding direction, preferably ' top ' or ' left 'Direction: ' Top ',  //It's only used when you want to override the default behavior.Scrolltarget:NULL,  //the callback function before the swipe starts. ' This ' represents the element being scrolledBeforescroll:function() {},  //the callback function after the slide is complete. ' This ' represents the element that triggered the slideAfterscroll:function() {},  //Ease EffectEasing: ' Swing ',  //speed of slidingspeed:400,  //coefficient of "automatic" accelerationAutocoefficent:2});

What the? Didn't read it?? Never mind!! There's a wave of brain-free operation underneath!

Just import the file, copy the following code into it, you can easily achieve smooth scrolling in the page

<script>$ (document). On (' Click ', ' a[href*= ', ' # ',function() {      if( This. Hash) {$.bbq.pushstate (' #/' + This. Hash.slice (1) ); return false; }}). Ready (function() {$ (window). Bind (' Hashchange ',function(event) {varTGT = Location.hash.replace (/^#\/?/, "); if(document.getElementById (TGT)) {$.smoothscroll ({scrolltarget:' # ' +TGT});      }      }); $ (window). Trigger (' Hashchange ');  }); </script>

Here is the click Technolog swipe to the Div area with ID A1, simple!

<href= "#a1">technology</a> <  ID= "A1"></div>

Smooth-scroll.js's? There are so many things on the internet that can't be found right? Message mailbox Ah, Bo Master service Dragon ...

The use of smooth scrolling--smooth-scroll.js in the page