<script type="text/javascript">$(function() {//錨點(diǎn)平滑滾動(dòng)效果
        $('a[href*=#],area[href*=#]').click(function() {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) {//解決錨點(diǎn)鏈接碰到固定定位問題var w = $(window).width();var targetOffset = $target.offset().top;if (w < 992) {targetOffset = $target.offset().top - 60;} else {targetOffset = $target.offset().top - 80;}//解決錨點(diǎn)鏈接碰到固定定位問題結(jié)束
                    $('html,body').animate({scrollTop: targetOffset}, 1000);return false;}}});//導(dǎo)航選中背景變色
        $('.nav li a').click(function() {$(this).addClass('on').parent().siblings().find('a').removeClass('on');//點(diǎn)擊導(dǎo)航,導(dǎo)航隱藏
            $(".navbar-collapse").removeClass("in")});//固頂
        $(window).scroll(function() {var top = $(window).scrollTop();var w = $(window).width();if (top >= 450) {$(".navbar-default").addClass("x_fixed");} else {$(".navbar-default").removeClass("x_fixed");}});//返回頂部
        $(window).scroll(function() {if ($(window).scrollTop() > 100) {$("#toTop").fadeIn(1500);} else {$("#toTop").fadeOut(1500);}});//當(dāng)點(diǎn)擊跳轉(zhuǎn)鏈接后，回到頁面頂部位置
        $("#toTop").click(function() {$('body,html').animate({scrollTop: 0}, 1000);return false;});})
</script>

?

轉(zhuǎn)載于:https://www.cnblogs.com/fkcqwq/p/11302983.html

總結(jié)

以上是生活随笔為你收集整理的包含锚点平滑滚动效果/解决锚点链接碰到固定定位问题/导航选中背景变色/固顶/返回顶部效果全...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。