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

(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里面的数值
					}
				});
			}
		}());

你这个代码是跳转到最后的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里面的数值

            });
        }

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

感觉你的代码有点逻辑问题，在监听事件里，你循环了一遍所有的li，并获取了每个li的top，还在循环里scrollTo，应该不是接收不到，而是都滚动到最后一个了，你应该在监听事件的循环里，判定你当前点的是哪个对象，然后再进行滚动

雏形大概这个样子，没有html代码，所以不清楚是否有效果。思路就是判断容器是否在可见区域，在就设置焦点 

<script>
    // (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);
        }
    }
    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里面的数值

        });
    }
    function getElStyle(el) {
        var computedStyle;
        if (window.getComputedStyle) {
            computedStyle = getComputedStyle(el, null)
        } else {
            computedStyle = el.currentStyle;
        }
        return computedStyle
    }
    function getOuterHeight(el) {//容器高度=内容高度+边框宽度+上下margin
        var h = 0, style = getElStyle(el);
        h = el.offsetHeight;
        h += parseInt(style['borderTopWidth']) || 0;
        h += parseInt(style['borderBottomWidth']) || 0;
        h += parseInt(style['marginTop']) || 0;
        h += parseInt(style['marginBottom']) || 0;
        return h;
    }
    window.onresize = function () {//用于计算窗体改变后listli的位置
        for (var i = 0; i < listli.length; i++) {//计算位置并缓存位置信息
            listli[i].pos = { top: listli[i].offsetTop, bottom: listli[i].offsetTop + getOuterHeight(listli[i]) }
        }
    };
    window.onresize();//位置初始化

    window.onscroll = function () {
        var el = document[document.compatMode == 'CSS1Compat' ? 'documentElement' : 'body'];
        var st = el.scrollTop, sb = el.clientHeight;//获取可是区域top和bottom
        for (var i = 0; i < listli.length; i++) {
            var pos = listli[i].pos;
            if ((pos.top >= st && pos.top <= sb) || (pos.bottom >= st && pos.bottom <= sb) || (pos.bottom<= st && pos.bottom>=sb)) {//可见区域内
                productLi[i].className='聚焦的样式名称'
            }
            else productLi[i].className = ''//去掉聚焦样式
        }
    };
    //}());

</script>

您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps: 问答会员年卡【8折】购 ，限时加赠IT实体书，即可 享受50次 有问必答服务，了解详情>>>https://t.csdnimg.cn/RW5m