How we can scroll down in email after click on a button

Question

I want to scroll down on section_one after clicking on an image.

My code is:-

<a href="#section_one">
    <img src="img.png" alt="">
</a>

<tr  style="margin-bottom: 40px;" id="section_one">
    <td>
        <table class="step1-section">
            <tr style="margin-bottom: 24px;">
                <td>
                    <p class="heading-2">Some text</p>
                </td>
            </tr>
        </table>
    </td>
</tr>

Also, Gmail changing my href to href="#m_9152231230583106464_section_one"

But it's not working. Kindly helps to find a solution. TIA.

Answer 1

There must be <a> tag link for scrolling in email. First <a> has href="#section_one". After clicking on this page will scroll and the second <a> has name="section_one" where the scroll will land.

<a href="#section_one">
        <img src="img.png" alt="">
    </a>

<tr  style="margin-bottom: 40px;">
    <td>
        <a href="#" name="section_one"></a>
        <table class="step1-section">
            <tr style="margin-bottom: 24px;">
                <td>
                    <p class="heading-2">Some text</p>
                </td>
            </tr>
        </table>
    </td>
</tr>

Answer 2

Consider using a "div" element instead of a "tr" element for your section, as "div" is more commonly used for this purpose

<a href="#section_one">
    <img src="img.png" alt="">
</a>

<div style="margin-bottom: 40px;" id="section_one">
    <table class="step1-section">
        <tr style="margin-bottom: 24px;">
            <td>
                <p class="heading-2">Some text</p>
            </td>
        </tr>
    </table>
</div>