iT邦幫忙

0

控制iframe的scroll,並且產生動畫效果

要iframe的檔

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div p{
            line-height:50px;
        }
    </style>
</head>
<body>
    <div>
        <p id="us">美國</p>
        <p id="tw">台灣</p>
        <p id="cn">中國</p>
        <p id="jp">日本</p>
        <p id="sg">新加坡</p>
        <p id="uk">澳洲</p>
    </div>
</body>
</html>

主頁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table{
            border:1px solid #000;
            text-align:center;
            border-collapse:collapse;
        }
        table td{
            border:1px solid #000;
            padding:5px;
        }
        iframe{
            height:250px;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td><a id="us" href="#us">美國</a></td>
        </tr>
        <tr>
            <td><a href="#tw">台灣</a></td>
        </tr>
        <tr>
            <td><a href="#cn">中國</a></td>
        </tr>
        <tr>
            <td><a href="#jp">日本</a></td>
        </tr>
        <tr>
            <td><a href="#sg">新加坡</a></td>
        </tr>
        <tr>
            <td><a href="#uk">澳洲</a></td>
        </tr>
    </table>
    <button id="button">123</button>
    <iframe src="iframe.php" id="iframe" name="iframe" width="100px" height="200px"></iframe>
    <script src="../js/jquery.js"></script>
    <script>
        $('#iframe').on('load',function(){
            var iframe = $(this) 
            var contents = iframe.contents();
                //console.log($contents);
            $('a').on('click',function(){
                event.preventDefault();
                iframe.attr('src','iframe.php'+$(this).attr('href'))
            })
            
        });
        
        
    </script>
</body>
</html>

目前可以利用點擊控制到相應位置,但不知道該如何讓他有滑動到該位置的效果

$('#iframe').on('load',function(){
            var iframe = $(this) 
            var contents = iframe.contents();
                //console.log($contents);
            $('a').on('click',function(){
                event.preventDefault();
                iframe.attr('src','iframe.php'+$(this).attr('href'))
            })
            
        });

1 個回答

1
冰水
iT邦新手 5 級 ‧ 2019-09-11 14:38:14

直接改變 iframe裡的src 可以做簡單的錨典動畫

<iframe src="iframe.php" name="iframe_a"></iframe>

<p><a href="iframe.php#US" target="iframe_a">test</a></p>

範例
https://codepen.io/a42356/pen/KKPRpJV

我要發表回答

立即登入回答