Jquery 点击使代码滑动到指定位置

在jQ中，通过点击后是页面滑动到指定位置，可以采取先获取要到达的位置距离页面总高度顶部的距离，再在点击时使页面上移：当前高度-目标位置距离顶部的距离

使用方法前提：需要引入jq.js和wow.js()

jq.js下载地址：Download jQuery | jQuery

wow.js下载地址：wow.js — Reveal Animations When Scrolling (wowjs.uk)

...
<link rel="stylesheet" href="./css/animate.min.css">
...

<div>

        ...

<ul class="nav navbar-nav navbar-right" id="bs-example-navbar-collapse-1">

     <li><a href="#idea">整装产品</a></li>

</ul>

        ...

<div id="idea">

        ...

</div>

</div>

<script src="./js/jquery-3.7.1.min.js"></script>

<script src="./js/wow.min.repeat.js"></script>

<script>

new WOW().init();

    $('#bs-example-navbar-collapse-1 a[href],#about a[href],#case a[href],#idea a[href],#home a[href],#foot a[href]').click(function () {

        // location.pathname 返回当前URL的路径名(不包含域名)

        // console.log(location.pathname) 系统的路径

        // console.log(location.pathname.replace(/^\//,''))

        // console.log(this.pathname.replace(/^\//, ''))  当前元素所跳转链接替换后的路径

        // console.log(location.hostname)  //系统获取域名部分

        // console.log(this.hostname)  //当前元素所跳转链接的域名部分

        console.log("1");

        //判断你跳转的链接 是不是在当前界面

        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {

            //获取将要跳转的锚点位置

            var $target = $(this.hash);

            $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');

           

            //一定要当他找到锚点元素的时候，才跳转锚点

            if ($target.length) {

                //获取目标元素的位置

                var targetOffset = $target.offset().top + 10;

               

                //让页面的body和html 滚动到 targetOffset这个位置

                $('html,body').animate({

                    scrollTop: targetOffset

                }, 1000);

            }

        }

    });

</script>