水平自动滚动到活动缩略图li

我有水平书页图像缩略图ul li，超过100个图像，我已经给出了文本框输入页码以激活该页面并查看该页面，它没有任何问题但它不是自动滚动到那个活动的li ul，我是JavaScript的初学者，请帮我这个，不管我的代码

HTML

 
  of  
 
 
  0) : ?>  
  <img src="https://stackoverflow.com/questions/47966545/horizontally-auto-scroll-to-active-thumbnail-li/page_name ?>" alt="Book Page"> 
    

JavaScript的

 var bookCurrentPages = $('.book #active-page-number'); $('#current-page').keypress(function(e) { var userInput = $('#current-page').val(); if (this.value.length == 0 && e.which == 48){ // disable enter zero return false; } else if (e.keyCode == 13) { bookCurrentPages.each(function (key) { var numKey = key + 1; if (userInput == numKey) { // console.log(numKey + " success"); var currentKey = userInput; // console.log(currentKey); $('#book-list li:nth-child('+ currentKey +')').children('img').trigger('click'); } }) return false; // prevent the button click from happening } }); 

演示检查我的代码， https：//jsfiddle.net/Looper/dmug0zxz/1/

Answer 1

你能试试吗

       
 
  of  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
another content
     

Answer 2

可以在窗口上使用jquery的scrollTop进行一些滚动：

 $(window).scrollLeft($('#book-list li:nth-child('+ currentKey +')').scrollLeft()) 

你可以在这里看一下scrollLeft函数： jQuery

另外，你可以通过这个做一些很酷的平滑滚动技巧：

 $('html,body').animate({ scrollLeft: xxx})