1、移動端商品比較多的時候回在固定位置有一個回到頂部或者底部的東西，實現原理是
1 <script type="text/javascript"> 2 $( function () { 3 var speed = 1000;//自定義滾動速度 4 //回到頂部 5 $( "#toTop").click( function () { 6 $( "html,body").animate({ "scrollTop" : 0 }, speed); 7 }); 8 //回到底部 9 var windowHeight = parseInt($("body").css("height" ));//整個頁面的高度 10 $( "#toBottom").click(function () { 11 $( "html,body").animate({ "scrollTop" : windowHeight }, speed); 12 }); 13 }); 14 15 </script>
2、pc端錨鏈接點擊滑動到相應的位置，但是要有一個緩慢滑動的效果。在js中插入一下代碼便可以。
1 //錨點滾動 2 $('a[href*=#],area[href*=#]').click(function () { 3 if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { 4 var $target = $(this.hash); 5 $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']'); 6 if ($target.length) { 7 var targetOffset = $target.offset().top; 8 $('html,body').animate({ 9 scrollTop: targetOffset 10 }, 11 500); 12 return false; 13 } 14 } 15 });
錨鏈接html代碼
1 <a href="#1f" class="button active">線路行程</a> 2 <div class="floor_a" id="1f"></div>
3、仿京東側邊欄效果
html代碼如下
1 <!-- 側邊欄 --> 2 <div class="slide_left_dailog"></div> 3 <div class="slide_left"></div>
css代碼如下
1 /*側邊欄*/ 2 .slide_left_dailog{ 3 width: 100%; height: 100%; 4 position: fixed; 5 left: 0; top: 0; 6 display: none; 7 z-index: 150; 8 background: rgba(0,0,0,.7); 9 } 10 .slide_left{ 11 width: 3rem; height: 100%; 12 position: fixed; 13 left: -3rem; top: 0; 14 z-index: 200; 15 background: #fff; 16 box-sizing: border-box; 17 border: 1px solid #dfdfdf; 18 }
js代碼如下
1 //側變欄 2 3 var widthSlid = $('.slide_left').width(); 4 $('.left_top').click(function(){ 5 $('.slide_left').animate({ "left" : 0 }, 500); 6 $('.slide_left_dailog').fadeIn(); 7 }); 8 $('.slide_left_dailog').click(function(){ 9 $('.slide_left').animate({ "left" : -widthSlid }, 500,function(){ 10 $('.slide_left_dailog').fadeOut(); 11 }); 12 });