题意有一点模糊、不知道想要的呈现效果具体是什么样的

如果是文档流之内锚点定位的话可以给个

id="aa"
href="#aa"

你这两个p如果是一个页面的两个弹窗切换、也可以用a标签绑定函数去操作

href="javascript:test();"

超链接标签是跳转到html的 ，p弹出窗口是css/JS控制的显示。
你说的你可以这样写：
1.aa与bb的弹出宽口分别写2个html页面也就是aa.html与bb.html
2.aa.html中的代码就是：

 <p class="aaa"></p>
 <p class="aaa"></p>
 <p class="aaa">
    <a href="bb.html"></a>
 </p>

</p>

3.bb.html中的代码就是：
<p class="bb">

 <p class="bbb"></p>
 <p class="bbb"></p>
 <p class="bbb">
    <a href="aa.html"></a>
 </p>

</p>

<a href="#test">1</a>
<p id="test">
    1
</p>

a链接的href指向 p的id。不同页面间一样是在地址上添加元素id

<p class="aa">
     <p class="aaa"></p>
     <p class="aaa"></p>
     <p class="aaa">
        <a href="javascript:void(0);"></a>
     </p>
  </p>
  
  
   <p class="bb">
     <p class="bbb"></p>
     <p class="bbb"></p>
     <p class="bbb">
        <a href="javascript:void(0);"></a>
     </p>
  </p>

使用jQuery事件监听

$('p.aa').on("click","aaa a",function(event){
    event.preventDefault();
    //弹出 bb 组件
});
$('p.bb').on("click","bbb a",function(event){
    event.preventDefault();
    //弹出 aa 组件
});

请输入代码登陆页面a.html ： <a href="b.html"></a>
跳转页面b.html ： <a href="a.html"></a>

<p id="pA"><a href="#" data-to="pB" ></a>
......
<pB id="pB"><a href="#" data-to="pA" ></a>

JQUERY
<script>
$(document).ready(function($){
    
//下面的写法是遍历了p中所有的a标签，适合做导航时候用，你这情况自己改下就好，直接加个点击事件就行不用我这么写
    $('#pA').on('click','a',function(e){
        
        var target = e.target;
        var p = $(target).data("to");
        console.log(e);
        console.log(p);

        $('html,body').animate({scrollTop:$('#'+p).offset().top}, 800);
    });


 $('#pB').on('click','a',function(e){
        
        var target = e.target;
        var p = $(target).data("to");
        console.log(e);
        console.log(p);

        $('html,body').animate({scrollTop:$('#'+p).offset().top}, 800);
    });
    

});
</scipt>