[javascript] 模拟通讯薄锚点跳转

Posted 2020-06-28

 1 $(document).ready(function(){
 2   $(‘.box‘).mousedown(function(){
 3       $(this).bind(‘mousemove‘, function(e){
 4         if(e.target.tagName=="A"){
 5           location.hash = e.target.getAttribute(‘href‘)
 6       }
 7     })
 8     $(document).mouseup(function(){
 9     $(‘.box‘).unbind(‘mousemove‘);
10     });
11   })
12 });

  1 <div class="box">
  2 <a href="#p10" class="a0">p10</a>
  3 <a href="#p11" class="a1">p11</a>
  4 <a href="#p12" class="a2">p12</a>
  5 <a href="#p13" class="a3">p13</a>
  6 <a href="#p14" class="a4">p14</a>
  7 <a href="#p15" class="a5">p15</a>
  8 <a href="#p16" class="a6">p16</a>
  9 </div>
 10 <div class="d1">
 11   <div class="d2">
 12     <p>001</p>
 13     <p>002</p>
 14     <p>003</p>
 15     <p>004</p>
 16     <p>005</p>
 17     <p>006</p>
 18     <p>007</p>
 19     <p>008</p>
 20     <p>009</p>
 21     <p><a name="p10">010</a></p>
 22     <p><a name="p11">011</a></p>
 23     <p><a name="p12">012</a></p>
 24     <p><a name="p13">013</a></p>
 25     <p><a name="p14">014</a></p>
 26     <p><a name="p15">015</a></p>
 27     <p><a name="p16">016</a></p>
 28     <p>017</p>
 29     <p>018</p>
 30     <p>019</p>
 31     <p>020</p>
 32     <p>021</p>
 33     <p>022</p>
 34     <p>023</p>
 35     <p>024</p>
 36     <p>025</p>
 37     <p>026</p>
 38     <p>027</p>
 39     <p>028</p>
 40     <p>029</p>
 41     <p>030</p>
 42     <p>031</p>
 43     <p>032</p>
 44     <p>033</p>
 45     <p>034</p>
 46     <p>035</p>
 47     <p>036</p>
 48     <p>037</p>
 49     <p>038</p>
 50     <p>039</p>
 51     <p>040</p>
 52     <p>041</p>
 53     <p>042</p>
 54     <p>043</p>
 55     <p>044</p>
 56     <p>045</p>
 57     <p>046</p>
 58     <p>047</p>
 59     <p>048</p>
 60     <p>049</p>
 61     <p>050</p>
 62     <p>051</p>
 63     <p>052</p>
 64     <p>053</p>
 65     <p>054</p>
 66     <p>055</p>
 67     <p>056</p>
 68     <p>057</p>
 69     <p>058</p>
 70     <p>059</p>
 71     <p>060</p>
 72     <p>061</p>
 73     <p>062</p>
 74     <p>063</p>
 75     <p>064</p>
 76     <p>065</p>
 77     <p>066</p>
 78     <p>067</p>
 79     <p>068</p>
 80     <p>069</p>
 81     <p>070</p>
 82     <p>071</p>
 83     <p>072</p>
 84     <p>073</p>
 85     <p>074</p>
 86     <p>075</p>
 87     <p>076</p>
 88     <p>077</p>
 89     <p>078</p>
 90     <p>079</p>
 91     <p>080</p>
 92     <p>081</p>
 93     <p>082</p>
 94     <p>083</p>
 95     <p>084</p>
 96     <p>085</p>
 97     <p>086</p>
 98     <p>087</p>
 99     <p>088</p>
100     <p>089</p>
101     <p>090</p>
102     <p>091</p>
103     <p>092</p>
104     <p>093</p>
105     <p>094</p>
106     <p>095</p>
107     <p>096</p>
108     <p>097</p>
109     <p>098</p>
110     <p>099</p>
111     <p>100</p>
112   </div>
113 </div>

 1 .box {
 2   position: fixed;
 3   left: 600px;
 4   top: 0;
 5   padding: 20px;
 6   border: 1px solid #ddd;
 7   a {
 8     display: block;
 9   }
10 }
11 .d1 {
12   width: 400px;
13   height: 400px;
14   padding: 100px;
15   background-color: #09f;
16   position: relative;
17   .d2 {
18     width: 100%;
19     height: 100%;
20     overflow-y: auto;
21     background-color: #f30;
22     p{
23       height: 20px;
24       line-height: 20px;
25     }
26   }
27 }