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 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 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 });