原生js页面内点击导航按钮跳转到指定位置，为什么实现不了？

Question

(function(){
	var productUl = document.getElementById("product_ul");
	var productLi = productUl.getElementsByTagName("li");
	var listul = document.getElementById("productUl");
	var listli = listul.getElementsByTagName("li");
	var pheight = document.getElementById("product_product");
		function productDh(dj){
			for(var i=0;i<productLi.length;i++){
				productLi[i].className = "";
				}
				productLi[dj].className = "producton";
				
			}
		for(var j=0;j<productLi.length;j++){
			productLi[j].index = j;
			productLi[j].onclick = function(){
				productDh(this.index);
				}
			}
		/*
            *循环每个导航按钮，添加监听点击事件，点击跳转到相应的位置，为什么实现不了，
            *我想把a的值根据productLi[i]点击哪一个跳转到相应的listli[j].offsetTop - h
        */	
		for(var i=0;i<productLi.length;i++){
			var h = pheight.offsetHeight;
			productLi[i].addEventListener("click",function(){	
				for(var j=0;j<listli.length;j++){
					var a = listli[j].offsetTop - h;
					console.log(a);//这里控制台都能输出每一项
					window.scrollTo(0,a);//这里就接收不了a里面的数值
					}
				});
			}
		}());

Answer 1

你这个代码是跳转到最后的listli所在位置了，改成下面这样，看加粗的部分

           

        for (var i = 0; i < productLi.length; i++) {
            productLi[i].addEventListener("click", function () {

var h = pheight.offsetHeight;//放里面来，防止页面resize过

                var i = this.index;//this为当前点击的li，获取你上一次for循环设置的index property

                var a = listli[i].offsetTop - h;
                console.log(a);//这里控制台都能输出每一项
                window.scrollTo(0, a);//这里就接收不了a里面的数值

            });
        }

 

 

帮助到你可以点击采纳吗，谢谢~~