vue --- navigation bar click to jump to the corresponding position

html：

<div id="nav" >

        <a class="xdapai" data-id="dapai" @click="goscrol">大牌</a>

        <a class="xdianfeng"  data-id="dianfeng" @click="goscrol">巅峰</a>

        <a  class="xbaokuan" data-id="baokuan" @click="goscrol">爆款</a>

</div>

js:

 

Methods: { 
    goscrol ($ Event) { 
      var ID = $ event.target.dataset.id; 
      . $ the scrollHeight var = $ ( "#" + ID) .offset () Top; 
      $ ( "HTML, body") Animate. ( 
        { 
          scrollTop: $ the scrollHeight 
        }, 
        500 
      ); 
    }, 


}, 
Mounted () { 
    
    // the navigation operation, the navigation bar when the scroll to the top, i.e., the navigation bar at the top of the adsorption does not move. 
    = function the window.onload () { 
      var ARR = [ 
        {ID: "dapai", height: $ ( "# dapai") height ()},. 
        {ID: "dianfeng", height: $ ( "# dianfeng") .height ()}, 
        {ID: "baokuan", height: $ ( "# baokuan") height ()},.  
        {ID: "freexi",
        {ID: "Fuli",

    //兼容性
      var box = document.getElementById("nav");
      var topmargin = box.offsetTop;
      var userAgent = navigator.userAgent.toLowerCase();
      var isIphone = userAgent.match(/iphone os/i) == "iphone os";
      var isAndroid = userAgent.match(/android/i) == 'android';
      $(window).on("scroll", function() {var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
		if(isIphone){
			scroll >= topmargin - 50 ? $("#nav").addClass("postplayIOS") : $("#nav").removeClass("postplayIOS");
			scroll >= topmargin - 50 ? $("#nav").addClass("postplayAndroid") : $("#nav").removeClass ( "postplayAndroid"); 
　　　　　　// When when the navigation bar at the top left, select the corresponding navigation style disappeared
		}
        
		}else{ 
	  IF (document.getElementById (ARR [0] .id) .offsetTop - $ (window) .scrollTop ()> 90) { 
            $ (. "X" + ARR [0] .id) .removeClass ( "redfont "); 
          } 

        for (var I = 0; I <arr.length; I ++) { 
          var nowbox = document.getElementById (ARR [I] .id); 
          IF (nowbox.offsetTop - $ (window) .scrollTop () < 90) { 
            $ (. "X" + ARR [I] .id) .addClass ( "redfont") SIBLINGS () removeClass ( "redfont");.. 
          } 
        } 
      }); 
    };

}    

 css:

#are not {

  background: #f37938;

  display: flex;

  width: 100%;

}

#nav a {

  display: block;

  width: 20%;

  height: 39px;

  line-height: 39px;

  text-align: center;

  color: #fff;

}

.postplayIOS {

  position: sticky;

  position: -webkit-sticky;

  left: 0;

  top: 0;

}

.postplayAndroid {

  position: fixed;

  left: 0;

  top: 0;

}

#nav .redfont {

  border-bottom: 2px solid #f9f100;

}