浏览器的地址栏信息 浏览器的滚动距离 滚动到指定位置回到顶部 开启关闭新的标签页 浏览器历史记录

浏览器的地址栏信息

=> 在我们的BOM中的顶级对象中有一个属性

=> 这个属性叫做: location

=> 是一个对象数据类型

=> 里面保存的就是和地址栏相关的信息

href 属性

 // href 属性
        <button id="btn">去到百度</button>
         btn.onclick = function () {
         //   // 写(设置)
             window.location.href = 'https://www.baidu.com'
         }

reload()

   // reload()
        // window.location.reload()

        btn.onclick = function () {
            window.location.reload()
        }

浏览器的滚动距离

=> 分为两个方向

-> 一个是页面向上滚动的高度

-> 一个是页面向左滚动的距离

=> 指的是我们的页面(文档)卷去的尺寸

获取的是 页面向上滚动的距离

    // 页面向上滚动的距离
        window.onscroll = function () {
            
            var scrollTop = document.documentElement.scrollTop
            var scrollTop = document.body.scrollTop 
            
            兼容性写法
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop
            console.log(scrollTop);
        }

获取的是 页面向左滚动的距离

     // 页面向左滚动的距离
        window.onscroll = function () {
            // var scrollLeft = document.documentElement.scrollLeft
            // var scrollLeft = document.body.scrollLeft 
            
            // 兼容性写法
            var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft
            console.log(scrollLeft);
        }

滚动到指定位置 回到顶部

     // 添加一个事件
        btn.onclick = function () {
            // 第一种: 就是传递数字
            window.scrollTo(2000,1500)
        }


        btn.onclick = function () {
            // 第二种: 就是传递对象
            window.scrollTo({
                left:2000,
                // top:1500,
                behavior:'smooth'
            })
        }


        /**
         *  1. 当页面滚动的距离大于 300 的时候, 让 header 和 btn 展示
         *          header 的 top 设置为 0 就能看到了
         *          btn 的 display 设置为 block 就能看到了
         *  2. 当页面滚动的距离小于等于 300 的时候, 让 header 和 btn 取消展示
         *          header 的 top 设置为 200 就能看到了
         *          btn 的 display 设置为 none 就能看到了
        */

        // 0. 想设置元素的属性, 一定要先获取标签
        var header = document.getElementById('header')
        var btn = document.querySelector('#btn')

        // 1. 监听页面的滚动距离, 从而决定是否展示 header 和 btn
        window.onscroll = function () {
            // console.log('滚动事件触发~~~~')
            // console.log(document.documentElement.scrollTop)
            if (document.documentElement.scrollTop > 300) {
                // console.log('现在该展示 header 和 btn')
                header.style.top = 0
                btn.style.display = 'block'
            } else {
                header.style.top = -200 + 'px'
                btn.style.display = 'none'
            }
        }

        /**
         *  1. 当页面滚动的距离大于 300 的时候, 让 header 和 btn 展示
         *          header 的 top 设置为 0 就能看到了
         *          btn 的 display 设置为 block 就能看到了
         *  2. 当页面滚动的距离小于等于 300 的时候, 让 header 和 btn 取消展示
         *          header 的 top 设置为 200 就能看到了
         *          btn 的 display 设置为 none 就能看到了
        */

        // 0. 想设置元素的属性, 一定要先获取标签
        var header = document.getElementById('header')
        var btn = document.querySelector('#btn')

        // 1. 监听页面的滚动距离, 从而决定是否展示 header 和 btn
        window.onscroll = function () {
            // console.log('滚动事件触发~~~~')
            // console.log(document.documentElement.scrollTop)
            if (document.documentElement.scrollTop > 300) {
                // console.log('现在该展示 header 和 btn')
                header.style.top = 0
                btn.style.display = 'block'
            } else {
                header.style.top = -200 + 'px'
                btn.style.display = 'none'
            }
        }

开启关闭一个新的标签页

  // 第一个: 就是开启一个新的标签页
        btn.onclick = function () {
            window.open('https://www.baidu.com')
        }

        // 第二个: 就是关闭当前标签页
        btn.onclick = function () {
            window.close()
        }

浏览器的历史记录

    浏览器的历史记录
                => 前提: 你要有历史记录
                => 在我们的 BOM 中有一个属性 , 
                => 叫做: history , 也是一个对象数据类型
                => 里面保存的都是和历史记录相关的内容
                 是去到下一个历史记录里面, 也就是去到下一个页面, 相当于浏览器左上角的 → 按钮
         *          注意: 我们需要之前有过回退操作, 不然无法使用这个方法
            历史前进
                => 语法: window.history.forward()
                => 作用: 就是历史前进
            历史后退
                => 语法: window.history.back()
                => 作用: 就是回退到上一个页面 相当于 ← 按钮
            历史跳转
                => 语法: window.history.go(参数)
                => 参数
                    -> 正整数 : 历史前进
                    -> 负整数 : 历史后退
                    -> 0 : 停留在当前页面
console.log(window.history)