timer

最新推荐文章于 2024-11-14 10:34:37 发布

jie310600

最新推荐文章于 2024-11-14 10:34:37 发布

阅读量97

点赞数

CC 4.0 BY-SA版权

分类专栏： AngularJS 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/jie310600/article/details/84884895

AngularJS 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一个使用AngularJS实现页面元素滚动定位的例子。通过自定义服务`commonFun`中的`scollToElement`方法，可以实现在点击指定元素时平滑滚动到目标位置的功能。

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="angular.min.js"></script>
    <script src="jquery.min.js"></script>
</head>
<body ng-app="myApp">

<div ng-controller="myController">
    <div style="height: 2000px" ng-click="clickDeal()">
        点我跳到bottom处
    </div>

    <button id="bottom">bottom</button>

</div>

</body>

<script>
    var app = angular.module('myApp', []);
    //定义服务
    app.service('commonFun', function ($http) {
        this.httpPost = function (url, dataObj, successFun, errorFun) {
            $http({
                method: 'POST',
                url: url,
                data: dataObj,
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                transformRequest: function (data) {
                    var str = '';
                    for (var i in data) {
                        str += i + '=' + data[i] + '&';
                    }
                    return str.substring(0, str.length - 1);
                }
            }).then(function successCallback(response) {
                if (successFun == null) {
                    alert("请求数据成功!")
                }
                else {
                    successFun(response);
                }
            }, function errorCallback(response) {
                //alert("getMenuListByMenuNameInRegex 请求数据错误!");
                if (errorFun == null) {
                    alert("url 请求数据错误!")
                } else {
                    errorFun(response);
                }
            });
        };

        this.httpPostFile = function (url, dataObj, successFun, errorFun) {
            var fd = new FormData();
            for (var i in dataObj) {
                fd.append(i, dataObj[i]);
            }
            $http({
                method: 'POST',
                url: url,
                data: fd,
                headers: {'Content-Type': undefined},
                transformRequest: angular.identity
            }).then(function successCallback(response) {
                if (successFun == null) {
                    alert("请求数据成功!")
                }
                else {
                    successFun(response);
                }
            }, function errorCallback(response) {
                //alert("getMenuListByMenuNameInRegex 请求数据错误!");
                if (errorFun == null) {
                    alert("url 请求数据错误!")
                } else {
                    errorFun(response);
                }
            });
        };

        this.httpGet = function (url, successFun, errorFun) {
            $http({
                method: 'GET',
                url: url
            }).then(function successCallback(response) {
                if (successFun == null) {
                    alert("请求数据成功!")
                }
                else {
                    successFun(response);
                }
            }, function errorCallback(response) {
                if (errorFun == null) {
                    alert("url 请求数据错误!")
                } else {
                    errorFun(response);
                }
            });
        };

        this.isEmptyObject = function (e) {
            var t;
            for (t in e) {
                return !1;
            }
            return !0
        };

        this.scollToElement = function (selector) {
//            console.info("selector == " + selector);
            var elementVar = $(selector);
            var num = elementVar.length;
//            console.info("num == " + num);
//            console.info("elementVar == " + elementVar);
            var elementHeight = elementVar.outerHeight(true);
//            console.info("elementHeight == " + elementHeight);
            //var elementOffsetTop = elementVar.offsetTop;
            var elementOffsetTop = elementVar.offset().top;
//            console.info("elementOffsetTop == " + elementOffsetTop);
            $(document).scrollTop(elementOffsetTop + elementHeight);
        }
    });

    app.controller('myController', function ($scope, commonFun,$timeout) {
        $scope.clickDeal = function () {
            commonFun.scollToElement("#bottom");
        };

        var timer = $timeout(function () {
            //console.log('hello world');
            //$(document).scrollTop(aa + 600);
            commonFun.scollToElement("#bottom");
        }, 3000);   //该函数延迟2秒执行
    });
</script>
</html>