angularjs锚点的使用

最新推荐文章于 2020-04-08 16:58:19 发布

weixin_33794672

最新推荐文章于 2020-04-08 16:58:19 发布

阅读量207

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Shirley-He/p/5564178.html

本文介绍了在AngularJS应用中解决使用#号作为路由时遇到的问题，并推荐了一种使用自定义服务实现平滑滚动到页面指定元素的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有很多人在使用ng-view时都用到了#号做route，所以如果在页面上需要用到锚点的时候就会比较头疼了。这个时候可以使用ng的anchorScroll，也可以使用jsGen中封装的anchorScroll。推荐使用jsGen中的anchorScroll。

services.js

.factory('anchorScroll', function () {
    function toView(element, top, height) {
        var winHeight = $(window).height();

        element = $(element);
        height = height > 0 ? height : winHeight / 10;
        $('html, body').animate({
            scrollTop: top ? (element.offset().top - height) : (element.offset().top + element.outerHeight() + height - winHeight)
        }, {
            duration: 200,
            easing: 'linear',
            complete: function () {
                if (!inView(element)) {
                    element[0].scrollIntoView( !! top);
                }
            }
        });
    }

    function inView(element) {
        element = $(element);

        var win = $(window),
            winHeight = win.height(),
            eleTop = element.offset().top,
            eleHeight = element.outerHeight(),
            viewTop = win.scrollTop(),
            viewBottom = viewTop + winHeight;

        function isInView(middle) {
            return middle > viewTop && middle < viewBottom;
        }

        if (isInView(eleTop + (eleHeight > winHeight ? winHeight : eleHeight) / 2)) {