Javascript 平滑滚动到锚点。不同的偏移量。媒体查询。不包括一些锚
情况:我想为每个锚链接平滑滚动到锚链接。接下来,我想为特定的锚链接设置一个偏移量(例如,只设置导航链接,但不设置站点上的锚链接)。最后我想添加媒体查询。。因此,偏移位置只能在定义的浏览器大小下工作(例如“最大宽度:767px”) 第一个问题:仅当其他功能(偏移定位)被禁用时,我的平滑滚动才有效。两者都不起作用。有什么帮助吗? 第二个问题:我不知道如何将“偏移定位”减少为“导航”锚链接Javascript 平滑滚动到锚点。不同的偏移量。媒体查询。不包括一些锚,javascript,jquery,offset,anchor-scroll,scroll-position,Javascript,Jquery,Offset,Anchor Scroll,Scroll Position,情况:我想为每个锚链接平滑滚动到锚链接。接下来,我想为特定的锚链接设置一个偏移量(例如,只设置导航链接,但不设置站点上的锚链接)。最后我想添加媒体查询。。因此,偏移位置只能在定义的浏览器大小下工作(例如“最大宽度:767px”) 第一个问题:仅当其他功能(偏移定位)被禁用时,我的平滑滚动才有效。两者都不起作用。有什么帮助吗? 第二个问题:我不知道如何将“偏移定位”减少为“导航”锚链接 // Smooth Scrolling $(function () { 'use strict'; $(
// Smooth Scrolling
$(function () {
'use strict';
$('a[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) {
$('html,body').animate({
scrollTop: target.offset().top
}, 300);
return false;
}
}
});
});
// Offset Positioning
function offsetAnchor() {
'use strict';
if (location.hash.length !== 0) {
window.scrollTo(window.scrollX, window.scrollY - 0);
}
}
// Offset Positioning with media query
function offsetAnchor() {
'use strict';
if (matchMedia('only screen and (max-width: 767px)').matches) {
if (location.hash.length !== 0) {
window.scrollTo(window.scrollX, window.scrollY - 220);
}
}
}
// This will capture hash changes while on the page
$(window).on("hashchange", function () {
'use strict';
offsetAnchor();
});
我是通过搜索这里和其他网站得到代码的,不是我自己写的。我想尽快学习javascript和jquery的基础知识。但现在能得到你们所有人的帮助就太好了。多谢各位
boris好的,我在这里找到了一些其他代码: 我复制了它一次,添加了一些媒体查询、偏移和特定类(ul.nav a)。我希望没有问题-直到现在它对我来说工作得很好。希望这是一个有用的解决方案!甚至代码也更小 只有一个“问题”:页面滚动两次。首先,它滚动到锚点,第二次它再次向上滚动220px(偏移量)如果页面只直接滚动一次到偏移位置,那就太好了强>
// Smooth Scrolling
var $root = $('html, body');
$('a').click(function () {
'use strict';
$root.animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
return false;
});
// Smooth Scrolling with offset and media-query
var $root = $('html, body');
$('ul.nav a').click(function () {
'use strict';
if (matchMedia('only screen and (max-width: 767px)').matches) {
$root.animate({
scrollTop: $($.attr(this, 'href')).offset().top - 220
}, 500);
return false;
}
});
我得到了一个优化为我的问题顺利滚动,最后。我认为媒体的质疑更清晰、更容易理解。此外,奇怪的“向下滚动,再向上滚动一些像素”效果现在消失了
// smooth scrolling
function screenMin768() {
'use strict';
var mq = window.matchMedia("(min-width: 768px)");
return mq.matches;
}
function screenMax767() {
'use strict';
var mq = window.matchMedia("(max-width: 767px)");
return mq.matches;
}
console.log(screenMin768() + " " + screenMax767());
if (screenMin768()) {
var $root = $('html, body');
$('a').click(function () {
'use strict';
$root.animate({
scrollTop: $($.attr(this, 'href')).offset().top - 55 // hier die variable aufrufen: "+ offset55"
}, 500);
return false;
});
}
// offset for normal a-tags, excluding mobile nav: ul.nav a
if (screenMax767()) {
var $root = $('html, body');
$('a:not(ul.nav a)').click(function () {
'use strict';
$root.animate({
scrollTop: $($.attr(this, 'href')).offset().top + 4
}, 500);
return false;
});
}
// offset for mobile nav: ul.nav a
if (screenMax767()) {
var $root = $('html, body');
$('ul.nav a').click(function () {
'use strict';
$root.animate({
scrollTop: $($.attr(this, 'href')).offset().top - 270
}, 500);
return false;
});
}
// offset correction for go-to-top button on mobile screen width
if (screenMax767()) {
var $root = $('html, body');
$('a.go-to-top').click(function () {
'use strict';
$root.animate({
scrollTop: $($.attr(this, 'href')).offset().top - 60
}, 500);
return false;
});
}
我只是一个设计师,所以我通过反复试验得到了它。我不理解每一行,例如“console.log…”。我打赌代码可以减少很多
因此,如果有人想优化/减少代码,那就太好了!:)强>