クリックイベント時にスクロール位置がリセットされてしまう

ページ中央に動画プレイヤーを固定し、クリックイベントで動画urlを書き換えるようなページを作っています。
スクロールした状態でクリックイベントを起こすと、スクロール位置がリセットされページの上まで戻ってしまうのを防ぐ方法は御座いますでしょうか？
ご教授いただければ幸いです。宜しくお願いします。

↓　htmlで簡略化したものです。<br>部分には本来別のコンテンツが表示されています。

<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<html>
<script>
         $(function(){
            var player;

            function fGetScript(){
                  $.ajax({
                  url:"http://www.youtube.com/player_api/",
                  dataType:"script",
                  success:function(data){
                     dbg("done");

                     window.onYouTubeIframeAPIReady=function() {
                        dbg("onYouTubeIframeAPIReady");

                        var first=$("#playlist li a").eq(0);
                        first.css("font-weight","bold");
                        loadPlayer(first.attr("rel"));
                     }
                  },
                  error:function(xhr, status, thrown) {
                     dbg(xhr);
                     fGetScript();
                  }
               }); 
            }
            fGetScript();

            function loadPlayer(videoID) {
               dbg("loadPlayer("+videoID+")");

               if(!player){
                  player = new YT.Player(
                     'player',{
                        width: '500',
                        height: '500',
                        videoId: videoID,
                        events: {
                           "onReady": onPlayerReady
                        }
                     }
                  );
               }else{
                  player.cueVideoById(videoID);
               }
            }
            function onPlayerReady(event){
               dbg("onPlayerReady");
               event.target.setVolume(50);
            }
            $("#playlist > li > a").click(function(){
               loadPlayer($(this).attr("rel"));
               $(this).parent().parent().find("a").css("font-weight","normal");
               $(this).css("font-weight","bold");
            });
            function dbg(str){
                  if(window.console && window.console.log){
                    console.log(str);
                  }
            }
         });
</script>



   <body>  
      <div id="wrap">
          <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
          <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
          
         <div id="playerbox">
             <div id='player'></div></div>

         <ul id="playlist">
            <li><a href="#" rel="9YEEl52u8XE">A vid</a></li>
            <li><a href="#" rel="XfkXW49bXfo">B vid</a></li>
            <li><a href="#" rel="j4zpzF0R1ow">C bid</a></li>
         </ul>
          
          <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
          <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      </div>
   </body>
</html>

行動規範の内容に同意します

回答2件

aタグじゃなくてボタンタグとかにするのが簡単です。
href属性自体を抜く方法もありますが、意味合いをきちんとするならボタンでしょうね。画面遷移するわけじゃないですし。

投稿2019/11/02 04:44

m.ts10806

総合スコア80875

Nick_

2019/11/02 04:50

aタグを回避するという手段もあるのですね。他のページでもaタグを多用してしまっているので、遷移しないものはボタンタグに切り替えてみようと思います！回答ありがとうございました。

m.ts10806

2019/11/02 05:01

見た目はCSSでもどうにでもなりますし、画面遷移しないaタグは別の考慮が必要となるのでむしろ悪手と思います

行動規範の内容に同意します

ベストアンサー

js
1            $("#playlist > li > a").click(function(){
2               loadPlayer($(this).attr("rel"));
3               $(this).parent().parent().find("a").css("font-weight","normal");
4               $(this).css("font-weight","bold");
5               return false;//ADD
6            });