jQuery javascript-scrollTop animate

<!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列表。jQuery javascript-scrollTop animate

在function checkIt(from)，

有錯誤，

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

我不知道如何解決它。

來源

2012-11-27 Ethan Kim

嘗試此鏈接。它可能會幫助:) http://stackoverflow.com/questions/7866629/jquery-scrolltop-if-url-has-hash –

我懷疑'$（form.parkList.selectedIndex + 1）'是一個很好的選擇器。它看起來不對我 – Alexander

錯誤是說$(form.parkList.selectedIndex+1)是未定義的，即它是空的。嘗試並設置一箇中斷點，看看選擇器是否正在返回任何東西。此外，我認爲你可以使用offsetTop()而不是offset().top，但我不是100％。

如果您嘗試按ID選擇或$('.'+form.parkList.selectedIndex+1)按類別選擇，您可能還想嘗試類似$('#'+form.parkList.selectedIndex+1)的項目。這也可能是你想要的東西，如：

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

etc如果你想要選擇列表中的第n個元素。

來源

2012-11-27 11:44:59 chead23

'（form.parkList.selectedIndex + 1）'是正確的值。我不能用'offsetTop（）'來解決它。對我來說這是非常困難的錯誤。（ –

jQuery javascript-scrollTop animate

回答

相關問題