jQuery javascript-scrollTop動畫

Question

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<script src="jquery.js"></script>
<script type="text/javascript">
    var index = "index";
    var park = "park";
    $(document).ready(function() {
        $("button").click(function() {
            url="http://openAPI.seoul.go.kr:8088/4150495f32313037XXXXX/json/SearchParkInfoService/1/20"
            $.getJSON(url,function(result) {
                var jsonObject = result.SearchParkInfoService;
                var totalCount = jsonObject.list_total_count;
                var row = jsonObject.row;
                document.write("<span id='topOfArticle'><b>원하는 공원을 목록에서 찾아보세요~</b></span>");
                document.write("<form> <select name = 'parkList'>");
                for (var i = 0 ; i < row.length ; i++) {
                    document.write("<option value = '" + row[i].P_IDX + "'>" + row[i].P_PARK + "</option>");
                }
                document.write("</select><input type='button' value='보러가기' onClick='checkIt(this.form)'>");
                for (var i = 0 ; i < row.length ; i++) {
                    document.write("<p id=" + row[i].P_IDX + "><h3><b>" + (i+1) + ". " + row[i].P_PARK + " (공원번호 " + row[i].P_IDX + ")</b></h3></p>");
                    document.write("<p><img src='" + row[i].P_IMG + "' width=150px border=1dp></p>");
                    document.write("<b>공원 설명 : </b><blockquote>" + row[i].P_LIST_CONTENT + "</blockquote>");
                    document.write("<p><b>위치(GRS80TM) : </b>경도 " + row[i].G_LONGITUDE + " / 위도 " + row[i].G_LATITUDE + "</p>");
                    document.write("<p><b>위치(WGS84) : </b>경도 " + row[i].LONGITUDE + " / 위도 " + row[i].LATITUDE + "</p>");
                    document.write("<p><b>주소 : </b>" + row[i].P_ADDR + "</p>");
                    document.write("<p><a href=http://maps.google.com/maps/api/staticmap?center="+row[i].LATITUDE+","+row[i].LONGITUDE+"&zoom=14&size=400x400&markers=color:blue%7Clabel:S%7C"+row[i].LATITUDE+","+row[i].LONGITUDE+"&sensor=true target=_blank> 지도에서 찾아보기(Google Maps) </a></p>");
                    document.write("<p><b>지역 및 관리부서 : </b>" + row[i].P_ZONE + " " + row[i].P_DIVISION + "</p>");
                    document.write("<p><b>전화번호 : </b>" + row[i].P_ADMINTEL + "</p>");
                    document.write("<font align='right'><a href='#top'> Top으로 가기 </a></font>");
                    document.write("<hr color=#cd67ff>");
                }
            });
        });
    });

    function checkIt(form) {
        var targetOffset = $(form.parkList.selectedIndex+1).offset().top;
        $('html, body').animate({scrollTop:targetOffset}, 'fast');
    }

</script>
</head>
<body>
    <h2>서울시 공원 정보를 조회하세요!</h2>
    <button>정보보러 가긔~</button>
</body>
</html>

我想單擊選項值按鈕“보러가기”按鈕，然后滾動到同一窗口中的selectedIndex列表。

在function checkIt(from) ，

有一個錯誤，

Uncaught TypeError: Cannot read property 'top' of undefined.

我不知道該如何解決。

Answer 1

錯誤是說$(form.parkList.selectedIndex+1)是未定義的，即它為null。 嘗試插入一個斷點，看看選擇器是否返回任何東西。 另外我認為您可以使用offsetTop()而不是offset().top ，但是我不是100％這樣。

如果嘗試按id選擇，則可能要嘗試$('#'+form.parkList.selectedIndex+1)如果$('#'+form.parkList.selectedIndex+1)選擇，則可能要嘗試$('.'+form.parkList.selectedIndex+1) 。 您可能還想要以下內容：

var index = form.parklist.selectedIndex+1;
$('#list').eq(index) ...

如果要嘗試在列表中選擇第n個元素，則為此類。

jQuery javascript-scrollTop動畫

問題描述

1 個解決方案

解決方案1
0 2012-11-27 11:44:59

jQuery javascript-scrollTop動畫

問題描述

1 個解決方案

解決方案1 0 2012-11-27 11:44:59

解決方案1
0 2012-11-27 11:44:59