Previous article Floating sidebar effect of e-commerce website It mentioned the CSS3 special effect that makes the sidebar display when entering the topic area, hide after leaving, and add. If the effect is further enhanced, we can click the anchor link to scroll smoothly to the anchor, such as the anchor code of the Eason topic page:
$(function(){ $('a[href*=#],area[href*=#]').click(function() { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { var $target = $(this.hash); $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']'); if ($target.length) { var targetOffset = $target.offset().top; $('html,body').animate({ scrollTop: targetOffset }, 1000); return false; } } }); })
The advantage of this code is that you can click the anchor link to scroll smoothly to the anchor, and browser The URL suffix does not contain the words "anchor", and it can be implemented without modifying the above code.
