Javascript 平滑滚动以在不同页面上定位_Javascript_Jquery_Smooth Scrolling

Javascript 平滑滚动以在不同页面上定位

javascript jquery

Javascript 平滑滚动以在不同页面上定位,javascript,jquery,smooth-scrolling,Javascript,Jquery,Smooth Scrolling,我在谷歌上搜索了如何平滑滚动到不同页面上的锚。我已经尝试了一些方法，但是，它们似乎不适用于我已经编写的可以在一个页面上平滑滚动的代码基本上，我已经在索引页面上锚定了我的联系人部分，并希望当我单击导航栏上的联系人链接时，我的其他页面能够平滑地滚动到该部分。但目前它所做的只是直接跳到锚点，而不从顶部滚动这是我的代码： $(document).ready(function() { $('a[href^="#"]').not("#quote-carousel a, ul.nav-pills

我在谷歌上搜索了如何平滑滚动到不同页面上的锚。我已经尝试了一些方法，但是，它们似乎不适用于我已经编写的可以在一个页面上平滑滚动的代码

基本上，我已经在索引页面上锚定了我的联系人部分，并希望当我单击导航栏上的联系人链接时，我的其他页面能够平滑地滚动到该部分。但目前它所做的只是直接跳到锚点，而不从顶部滚动

这是我的代码：

$(document).ready(function() {
    $('a[href^="#"]').not("#quote-carousel a, ul.nav-pills a, div#accordian a").on("click", function(a) {
        a.preventDefault();
        var b = this.hash,
            c = $(b);
        $("html, body").stop().animate({
            scrollTop: c.offset().top - 50
        }, 900, "swing", function() {
            window.location.hash = b
        })
    })
});

在点击锚定标记时添加以下代码，并考虑如下html

<div class="class_name"><a href="#contact">Contact</a></div>

上面的-50值根据标题高度的不同而变化。

在单击锚定标记时添加以下代码，并考虑如下html

<div class="class_name"><a href="#contact">Contact</a></div>

上面的-50值根据页眉高度的不同而变化。

您可以在哈希值变化和页面加载时开始滚动。因此，您可以滚动到目标元素并创建深度链接

因此，您的方法和我的方法之间的主要区别是，首先更改散列（或不阻止它），然后侦听散列更改事件

我就是这样做的：

JavaScript:

$(document).ready(function() {
    // check for hash when page has loaded
    if (getHash() != null) {
        checkForScrolling();
    }
});

// listen for hash change event here
window.onhashchange = function() {
    checkForScrolling();
};

// return hash if so or null if hash is empty
function getHash() {
    var hash = window.location.hash.replace('#', '');
    if (hash != '') {
        return hash;
    } else {
        return null;
    }
}

// this function handles your scrolling
function checkForScrolling() {
    // first get your element by attribute selector
    var elem = $('[data-anchor="' + getHash() + '"]');

    // cheeck if element exists
    if (elem.length > 0) {
        $('html, body').stop().animate({
            scrollTop: elem.offset().top
        }, 300);
    }
}

工作HTML示例：

<!DOCTYPE html>
<html>
    <head>
        <title>Smooth Scrolling</title>
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                // check for hash when page has loaded
                if (getHash() != null) {
                    checkForScrolling();
                }
            });
            // check for hash when hash has changed
            window.onhashchange = function() {
                checkForScrolling();
            };
            // return hash if so or null if hash is empty
            function getHash() {
                var hash = window.location.hash.replace('#', '');
                if (hash != '') {
                    return hash;
                } else {
                    return null;
                }
            }
            // this function handles your scrolling
            function checkForScrolling() {
                // first get your element by attribute selector
                var elem = $('[data-anchor="' + getHash() + '"]');
                // cheeck if element exists
                if (elem.length > 0) {
                    $('html, body').stop().animate({
                        scrollTop: elem.offset().top
                    }, 300);
                }
            }
        </script>
        <style type="text/css">
            body { font-family: Helvetica }
            section { position: relative; margin-bottom:10px; padding:20px; height: 300px; background-color: #eee; }
            section a { display:block; position: absolute; bottom: 10px; }
        </style>
    </head>
    <body>
        <div>
            <h1 data-anchor="start">Smooth Scrolling</h1>
            <ul>
                <li><a href="#1">Scroll to Anchor 1</a></li>
                <li><a href="#2">Scroll to Anchor 2</a></li>
                <li><a href="#3">Scroll to Anchor 3</a></li>
            </ul>
            <section>
                <h2 data-anchor="1">First Anchor</h2>
                <a href="#start">Back to top</a>
            </section>
            <section>
                <h2 data-anchor="2">Second Anchor</h2>
                <a href="#start">Back to top</a>
            </section>
            <section>
                <h2 data-anchor="3">Third Anchor</h2>
                <a href="#start">Back to top</a>
            </section>
        </div>
    </body>
</html>


平滑滚动
$（文档）.ready（函数（）{
//加载页面时检查哈希
如果（getHash（）！=null）{
checkForScrolling（）；
}
});
//当哈希值已更改时检查哈希值
window.onhashchange=函数（）{
checkForScrolling（）；
};
//如果是，则返回哈希；如果哈希为空，则返回null
函数getHash（）{
var hash=window.location.hash.replace（'#'，''）；
如果（哈希！=''）{
返回散列；
}否则{
返回null；
}
}
//此函数用于处理滚动
函数checkForScrolling（）{
//首先通过属性选择器获取元素
var elem=$（'[data-anchor=“'+getHash（）+''“]）；
//如果元素存在，请检查
如果（元素长度>0）{
$（'html，body'）.stop（）.animate({
scrollTop:elem.offset（）.top
}, 300);
}
}
正文{字体系列：Helvetica}
节{位置：相对；页边距底部：10px；填充：20px；高度：300px；背景色：#eee；}
a部分{显示：块；位置：绝对；底部：10px；}
平滑滚动





第一锚
第二锚
第三锚

您可以在哈希更改和页面加载时开始滚动。因此，您可以滚动到目标元素并创建深度链接

因此，您的方法和我的方法之间的主要区别是，首先更改散列（或不阻止它），然后侦听散列更改事件

我就是这样做的：

JavaScript:

$(document).ready(function() {
    // check for hash when page has loaded
    if (getHash() != null) {
        checkForScrolling();
    }
});

// listen for hash change event here
window.onhashchange = function() {
    checkForScrolling();
};

// return hash if so or null if hash is empty
function getHash() {
    var hash = window.location.hash.replace('#', '');
    if (hash != '') {
        return hash;
    } else {
        return null;
    }
}

// this function handles your scrolling
function checkForScrolling() {
    // first get your element by attribute selector
    var elem = $('[data-anchor="' + getHash() + '"]');

    // cheeck if element exists
    if (elem.length > 0) {
        $('html, body').stop().animate({
            scrollTop: elem.offset().top
        }, 300);
    }
}

工作HTML示例：

<!DOCTYPE html>
<html>
    <head>
        <title>Smooth Scrolling</title>
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                // check for hash when page has loaded
                if (getHash() != null) {
                    checkForScrolling();
                }
            });
            // check for hash when hash has changed
            window.onhashchange = function() {
                checkForScrolling();
            };
            // return hash if so or null if hash is empty
            function getHash() {
                var hash = window.location.hash.replace('#', '');
                if (hash != '') {
                    return hash;
                } else {
                    return null;
                }
            }
            // this function handles your scrolling
            function checkForScrolling() {
                // first get your element by attribute selector
                var elem = $('[data-anchor="' + getHash() + '"]');
                // cheeck if element exists
                if (elem.length > 0) {
                    $('html, body').stop().animate({
                        scrollTop: elem.offset().top
                    }, 300);
                }
            }
        </script>
        <style type="text/css">
            body { font-family: Helvetica }
            section { position: relative; margin-bottom:10px; padding:20px; height: 300px; background-color: #eee; }
            section a { display:block; position: absolute; bottom: 10px; }
        </style>
    </head>
    <body>
        <div>
            <h1 data-anchor="start">Smooth Scrolling</h1>
            <ul>
                <li><a href="#1">Scroll to Anchor 1</a></li>
                <li><a href="#2">Scroll to Anchor 2</a></li>
                <li><a href="#3">Scroll to Anchor 3</a></li>
            </ul>
            <section>
                <h2 data-anchor="1">First Anchor</h2>
                <a href="#start">Back to top</a>
            </section>
            <section>
                <h2 data-anchor="2">Second Anchor</h2>
                <a href="#start">Back to top</a>
            </section>
            <section>
                <h2 data-anchor="3">Third Anchor</h2>
                <a href="#start">Back to top</a>
            </section>
        </div>
    </body>
</html>


平滑滚动
$（文档）.ready（函数（）{
//加载页面时检查哈希
如果（getHash（）！=null）{
checkForScrolling（）；
}
});
//当哈希值已更改时检查哈希值
window.onhashchange=函数（）{
checkForScrolling（）；
};
//如果是，则返回哈希；如果哈希为空，则返回null
函数getHash（）{
var hash=window.location.hash.replace（'#'，''）；
如果（哈希！=''）{
返回散列；
}否则{
返回null；
}
}
//此函数用于处理滚动
函数checkForScrolling（）{
//首先通过属性选择器获取元素
var elem=$（'[data-anchor=“'+getHash（）+''“]）；
//如果元素存在，请检查
如果（元素长度>0）{
$（'html，body'）.stop（）.animate({
scrollTop:elem.offset（）.top
}, 300);
}
}
正文{字体系列：Helvetica}
节{位置：相对；页边距底部：10px；填充：20px；高度：300px；背景色：#eee；}
a部分{显示：块；位置：绝对；底部：10px；}
平滑滚动





第一锚
第二锚
第三锚

您是否可以用最少的代码创建一个JSFIDLE来说明您的问题？animate scrollTop应该可以解决这个问题AFAIKI目前看不到您的代码存在问题。它正在做它应该做的事情：唯一的问题可能是你以前有JS错误或者没有包含jQuery脚本文件。控制台中有任何错误吗，但是当我在另一个页面上点击导航栏上的联系人链接时，它会直接跳转到索引页面上的锚点，而不会从顶部滚动。您是否可以用最少的代码创建一个JSFIDLE来说明您的问题？一