鼠标滚动到某处出现浮动层，并且点击浮动层上的链接跳到页面相应位置

如上图所示，橙色线以上的部分是浮动层，页面刚打开时并不显示，但是当页面向下滚动到下面相应位置时浮动层出现，并始终出现在顶部。浮动层蓝色文字是链接，点击链接页面会跳到页面下面相应的位置。
首先，让我们先用jquery实现浮动层的显示。
浮动层代码如下：

主要css代码如下：
.hdetail_float_top{background:url(../image/hdetail_gradualBg.png) repeat-x; height:86px;border-bottom:1px solid #f08200;}
jquery代码如下：(先引入jquery文件，然后引入jquery.floatDiv.min.js，见此篇文章http://blog.sina.com.cn/s/blog_60b35e830101537l.html)
$(".hdetail_float_top").floatdiv({left: "0", top: "0"});//先将浮动层隐藏，设置位置
    $(".hdetail_float_top").parent("div").css("width","100%");//保证ie6中浮动顶部也是通栏的
    var float_top=$(".pos").offset().top;//页面滚动到样式为pos的位置就开始出现浮动层
    $(window).scroll(function (){
        var offsetTop = $(window).scrollTop();
        if(offsetTop>float_top)
        {
            $(".hdetail_float_top").fadeIn(800);
        }
        else
        {
            $(".hdetail_float_top").fadeOut(800);
        }
    });
然后我们再来看点击蓝色文字链接跳到页面相应位置的实现方法，首先我们肯定是想到了锚点链接，但是用这个方法发现跳到位置因为上面有浮动层，会遮住部分内容，所以不能采用锚点链接方法。我们只能用js实现了。代码如下：
function click_scroll(click_url,click_end) {//函数两个参数：（需要点击的文字，跳到的位置）
         $("#"+click_url).click(function(){
         var scroll_offset = $("#"+click_end).offset();
         $("body,html").animate({
         scrollTop:scroll_offset.top-86},0);});//跳到的位置减去顶部浮动层的高度
         };//设置函数
    click_scroll("hdetail_room_style","hdetail_room_style1");
    click_scroll("hdetail_hotel_desc","hdetail_hotel_desc1");
    click_scroll("hdetail_hotel_eval","hdetail_hotel_eval1");
    click_scroll("hdetail_hotel_trans","hdetail_hotel_trans1");