jquery实现页面内链接锚点跳转平滑滚动效果

  • jQuery下实现锚点链接的平滑滚动(带浮动侧边栏)
    css+html+js
<style>
    * {
        margin: 0;
        padding: 0;
    }  
    body {
        font-size: 12px;
        line-height: 1.7;
    } 
    li {
        list-style: none;
    }
    #content {
        width: 800px;
        margin: 0 auto;
        padding: 20px;
    }
    #content h1 {
        color: #0088bb;
    }
    #content .item {
        padding: 20px;
        margin-bottom: 20px;
        border: 1px dotted #0088bb;
    }
    #content .item h2 {
        font-size: 16px;
        font-weight: bold;
        border-bottom: 2px solid #0088bb;
        margin-bottom: 10px;
    }  
    #content .item li {
        display: inline;
        margin-right: 10px;
    }
    #content .item li a img {
        width: 230px;
        height: 230px;
        border: none;
    }    
    #menu {
        position: fixed;
        top: 120px;
        right: 180px;
    }
    #menu ul li a {
        display: block;
        margin: 5px 0;
        font-size: 14px;
        font-weight: bold;
        color: #333;
        width: 80px;
        height: 50px;
        line-height: 50px;
        text-decoration: none;
        text-align: center;
    }
    #menu ul li a:hover,
    #menu ul li a.current {
        color: #fff;
        background: #0088bb;
    }
    /*ie6 hack*/
    * html,
    * html body {
        background-image: url(about:blank);
        background-attachment: fixed;
    } 
    * html #menu {
        /*position: fixed;*/
        position: absolute;
        top: expression(((e=document.documentElement.scrollTop)?e: document.body.scrollTop)+100+'px');
    }
    </style>
 <script>
    $(document).ready(function() {
        $(window).on('scroll', function() {
            var scrollTop = $(document).scrollTop();
            var menu = $("#menu");
            var items = $("#content").find(".item");
            var currentId = "";

            items.each(
                function() {
                    var im = $(this);
                    var itemTop = im.offset().top;
                    //console.log(itemTop);
                    if (scrollTop > (itemTop - 188)) {
                        currentId = "#" + im.attr("id");
                    } else {
                        return false;
                    }
                });

            var currentLink = menu.find(".current");
            if (currentId && currentLink.attr("href") != currentId) {
                currentLink.removeClass("current");
                menu.find("a[href=" + currentId + "]").addClass("current");
            }
        })
        var $a = $("a[href*='item']");
        /*            $a[1].onclick=function(){
                      console.log('123');
                    }*/
        $a.each(
            function() {
                console.log(this);
                $(this).on('click',
                    function() {
                        $('html,body').animate({
                            scrollTop: $($.attr(this, 'href')).offset().top
                        }, 500);
                        return false;
                    })
            }
        )

    });
    </script>
 <div id="menu">
        <ul>
            <!--运用锚点,实现导航定位。-->
            <li><a href="#item1" class="current">1F 男装</a></li>
            <li><a href="#item2">2F 女装</a></li>
            <li><a href="#item3">3F 美妆</a></li>
            <li><a href="#item4">4F 数码</a></li>
            <li><a href="#item5">5F 母婴</a></li>
        </ul>
    </div>
    <div id="content">
        <h1>地狗购物网</h1>
        <div id="item1" class="item">
            <h2>1F 男装</h2>
            <ul>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-b5b45b29072554f2.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-b5b45b29072554f2.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-b5b45b29072554f2.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-b5b45b29072554f2.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-b5b45b29072554f2.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-b5b45b29072554f2.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-b5b45b29072554f2.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-b5b45b29072554f2.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-b5b45b29072554f2.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
            </ul>
        </div>
        <div id="item2" class="item">
            <h2>2F 女装</h2>
            <ul>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-c6860eb3ccb91287.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-c6860eb3ccb91287.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-c6860eb3ccb91287.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-c6860eb3ccb91287.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-c6860eb3ccb91287.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-c6860eb3ccb91287.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-c6860eb3ccb91287.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-c6860eb3ccb91287.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-c6860eb3ccb91287.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
            </ul>
        </div>
        <div id="item3" class="item">
            <h2>3F 美妆</h2>
            <ul>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-ac1bab21c95b5e97.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-ac1bab21c95b5e97.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-ac1bab21c95b5e97.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-ac1bab21c95b5e97.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-ac1bab21c95b5e97.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-ac1bab21c95b5e97.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-ac1bab21c95b5e97.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-ac1bab21c95b5e97.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-ac1bab21c95b5e97.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
            </ul>
        </div>
        <div id="item4" class="item">
            <h2>4F 数码</h2>
            <ul>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-3bb9aebf54bb385d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-3bb9aebf54bb385d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-3bb9aebf54bb385d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-3bb9aebf54bb385d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-3bb9aebf54bb385d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-3bb9aebf54bb385d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-3bb9aebf54bb385d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-3bb9aebf54bb385d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-3bb9aebf54bb385d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
            </ul>
        </div>
        <div id="item5" class="item">
            <h2>5F 母婴</h2>
            <ul>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-c2a985adf3ff41db.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-c2a985adf3ff41db.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-c2a985adf3ff41db.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-c2a985adf3ff41db.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-c2a985adf3ff41db.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-c2a985adf3ff41db.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-c2a985adf3ff41db.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-c2a985adf3ff41db.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
                <li>
                    <a href="#">![](http://upload-images.jianshu.io/upload_images/6348994-c2a985adf3ff41db.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                </li>
            </ul>
        </div>
    </div>
  • JQuery实现简单的平滑过渡效果
<script type="text/JavaScript">  
$(document).ready(function() {  
    var $root = $('html, body');  //选择器缓存起来。这样每次点击时就不需要再重新查找了
    $('a').click(function() {
        var href = $.attr(this, 'href');
        $root.animate({
            scrollTop: $(href).offset().top
        }, 500, function () {
            window.location.hash = href;
        });
        return false;
    });
});  
</script>  
  • JQuery实现平滑过渡效果

改进版 好处是点击锚点链接平滑滚动到锚点,并且浏览器URL后缀不带有锚点字样

<script type="text/JavaScript">  
    $(document).ready(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;
          }
        }
    });
});  
</script> 

推荐阅读更多精彩内容