Implementation code for sliding buffer navigation in jquery Web pages

Source: Internet
Author: User

If the page is too long and needs to be navigated in the page, we typically set the ID in the target, such as <div id= "Footer" ></div>, and then on the current page a link address setting such as: <a href= "#footer" > Click to point to the bottom </a>, so click on the link will immediately go to the bottom of the page, the default is directly to the bottom, some visitors will inexplicably, how suddenly to the bottom.

In more and more attention to the user experience today, this we have to solve, the following is a simple jquery code to achieve a sliding buffer to achieve the page navigation, user experience greatly improve!

Here's the code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 The <script src=" In.js "></script> <script type=" Text/javascript "> jQuery.fn.anchorGoWhere = function (options) {var obj = JQuery (this); var defaults = {target:0, timer:500}; var o = jquery.extend (defaults,options); Obj.each (function (i) {jQuery (Obj[i]). Click (function () {var _rel = jquery (this). attr ("href"). substr (1); switch ( {case 1:var _targettop = jQuery (' # ' +_rel). Offset (). Top; JQuery ("Html,body"). Animate ({scrolltop:_targettop} , O.timer); Break Case 2:var _targetleft = JQuery ("#" +_rel). Offset (). JQuery ("Html,body"). Animate ({Scrollleft:_targetleft},o.timer); Break return false; }); }); };   $ ("#mybtn"). Anchorgowhere ({target:1}); Here is the ID of the click button </script>
Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.