zoukankan      html  css  js  c++  java
  • 设置滚动位置

    //返回顶部
    $('.leftTop').click(function(){
    $('body,html').animate({scrollTop:0},500);
    });

    到指定位置
    html:
    <!-- left 导航-->
    <div class="nav-left">
    <ul class="floatCtro">
    <li data-key="daPeiTaoZhuang">
    <a href="javascript:;">搭配套装</a>
    <span></span>
    </li>
    <li data-key="woshi">
    <a href="javascript:;">卧室</a>
    <span></span>
    </li>
    <li data-key="keting">
    <a href="javascript:;">客厅</a>
    <span></span>
    </li>
    <li data-key="goon">
    <a href="javascript:;">还没逛够</a>
    <span></span>
    </li>
    <span class="leftTop"><i class="tops"></i>顶部</span>
    </ul>
    </div>
    <div class="main-box" id="keting">
    <div class="border-clear">
    <h3 class="f1 l">1F 卧室</h3>
    <div class="floor-tag r">
    <a target="_blank" href='javascript:void(0);' class="more">更多<i></i></a>
    </div>
    </div>
    <div class="content-clear">
    <div class="feature-img l">
    <a target="_blank" href="javascript:void(0);" class="floor_good1"><img src="__PUBLIC__/images/floor1.jpg"></a>
    <ul class="floor_good2 clearfix">
    <li>
    <a href="javascript:void(0);">床头柜床头柜床头柜</a>
    </li>
    <li>
    <a href="javascript:void(0);">床头柜</a>
    </li>
    <li>
    <a href="javascript:void(0);">床头柜</a>
    </li>
    <li>
    <a href="javascript:void(0);">床头柜</a>
    </li>
    <li>
    <a href="javascript:void(0);">床头柜</a>
    </li>
    <li>
    <a href="javascript:void(0);">床头柜</a>
    </li>
    </ul>
    </div>
    <div class="floor_banner l">
    <div class="slider">
    <ul class="slider-main" id="slider-main_{$k1}">

    </ul>
    <div class="slider-extra">
    <ul class="slider-nav" id="slider-nav_{$k1}">
    <li class="slider-item"></li><li class="slider-item"></li><li class="slider-item"></li>
    </ul>
    <div class="slider-page" id="slider-page_{$k1}">
    <a class="slider-pre" href="javascript:;;">&lt;</a>
    <a class="slider-next" href="javascript:;;">&gt;</a>
    </div>
    </div>
    </div>
    </div>
    <ul class="floor_right l">
    <li>
    <div>
    <a href="javascript:void(0);" class="floor_good_title">海尔直驱狂想曲</a>
    <a href="javascript:void(0);" class="floor_good_subtitle">韩式臻白五抽书桌</a>
    <a href="javascript:void(0);">
    <img src="__PUBLIC__/images/floor2.jpg">
    </a>
    </div>
    </li>
    <li>
    <div>
    <a href="javascript:void(0);" class="floor_good_title">海尔直驱狂想曲</a>
    <a href="javascript:void(0);" class="floor_good_subtitle">韩式臻白五抽书桌</a>
    <a href="javascript:void(0);">
    <img src="__PUBLIC__/images/floor2.jpg">
    </a>
    </div>
    </li>
    <li>
    <div>
    <a href="javascript:void(0);" class="floor_good_title">海尔直驱狂想曲</a>
    <a href="javascript:void(0);" class="floor_good_subtitle">韩式臻白五抽书桌</a>
    <a href="javascript:void(0);">
    <img src="__PUBLIC__/images/floor2.jpg">
    </a>
    </div>
    </li>
    <li>
    <div>
    <a href="javascript:void(0);" class="floor_good_title">海尔直驱狂想曲</a>
    <a href="javascript:void(0);" class="floor_good_subtitle">韩式臻白五抽书桌</a>
    <a href="javascript:void(0);">
    <img src="__PUBLIC__/images/floor2.jpg">
    </a>
    </div>
    </li>
    <li>
    <div>
    <a href="javascript:void(0);" class="floor_good_title">海尔直驱狂想曲</a>
    <a href="javascript:void(0);" class="floor_good_subtitle">韩式臻白五抽书桌</a>
    <a href="javascript:void(0);">
    <img src="__PUBLIC__/images/floor2.jpg">
    </a>
    </div>
    </li>
    <li>
    <div>
    <a href="javascript:void(0);" class="floor_good_title">海尔直驱狂想曲</a>
    <a href="javascript:void(0);" class="floor_good_subtitle">韩式臻白五抽书桌</a>
    <a href="javascript:void(0);">
    <img src="__PUBLIC__/images/floor2.jpg">
    </a>
    </div>
    </li>
    </ul>
    </div>
    </div>

    js:
    $('.floatCtro li').click(function(){
    var id = $(this).attr("data-key");
    var topVal = $('#'+id).offset().top-50;
    $('body,html').animate({scrollTop:topVal},500);
    });
  • 相关阅读:
    地形碰撞检测方法(转)
    无法在web服务器上启动调试 打开的URL的IIS辅助进程没有运行
    VBA中变量申明
    由于 Web 服务器上的“ISAPI 和 CGI 限制”列表设置,无法提供您请求的页面
    JSON与XML的比较
    缺少对公共可见类型或成员“XXX”的 XML 注释
    iis下网站无法找到该页 (iis无法显示aspx文件问题)
    C#实现所有经典排序算法
    因为此版本的应用程序不支持其项目类型(.csproj) .
    C# winform 捕获全局异常
  • 原文地址:https://www.cnblogs.com/lst619247/p/8342273.html
Copyright © 2011-2022 走看看