Javascript 从一个div滚动到另一个div_Javascript_Jquery_Html

Javascript 从一个div滚动到另一个div

javascript jquery html

Javascript 从一个div滚动到另一个div,javascript,jquery,html,Javascript,Jquery,Html,我想要一种效果，如果你向下滚动，你可以“平滑滚动”到下一个/上一个div，这取决于你是向上滚动还是向下滚动。所以我有几个div <body> <div class="wrapper"> <div class="slide">...</div> <div class="slide">...</div> <div class="slide">...</div> <di

我想要一种效果，如果你向下滚动，你可以“平滑滚动”到下一个/上一个

div

，这取决于你是向上滚动还是向下滚动。所以我有几个div

<body>
<div class="wrapper">
    <div class="slide">...</div>
    <div class="slide">...</div>
    <div class="slide">...</div>
    <div class="slide">...</div>
    <div class="slide">...</div>
    <div class="slide">...</div>
</div>
</body>

如果我取消上面的代码注释并连接

target.offset（）.top

它会给我带来一个错误，但是如果我这样尝试，它总是将我滚动到第一个/top div

我怎样才能解决这个问题？有更好的解决办法吗？

非常感谢@Abhisek Malakar和@Gene R！他对我帮助很大！我将把这个问题留给他们去接受

然而，我将展示我是如何扩展它的，因为即使在修复之后，如果你足够用力地滚动鼠标滚轮，它仍会继续滚动（这也修复了笔记本电脑的触摸板），并且如果你使用其他滚动方式，我改进了页面识别你当前所在div的方式（拖动滚动条/箭头等）

欢迎提出任何改进建议

再次感谢

var currentSlide = 0,
    scrollSmooth = 1000,
    $prom = $('div.slide');

$(function()
{
    //Adding a binding listener to mousewheel (DOMMouseScroll is for FF)..
    $(window).bind('mousewheel DOMMouseScroll', function(event)
    {
        //Firefox nema argument wheelDelta, ali ima detail
        var delta = (event.originalEvent.wheelDelta !== undefined ? 
            event.originalEvent.wheelDelta : -event.originalEvent.detail);
        if(delta >= 0)
        {
            if(currentSlide === 0)
                return;
            currentSlide--;
        }
        else
        {
            if(currentSlide >= $prom.length - 1)
                return;
            currentSlide++;
        }
        //Turning off scroll functionality untill div is reached
        disableScroll();
        setTimeout(function() 
        { 
            if (window.removeEventListener)
                window.removeEventListener('DOMMouseScroll', preventDefault, false);
            window.onmousewheel = document.onmousewheel = null; 
            window.onwheel = null; 
            window.ontouchmove = null;  
            document.onkeydown = null; 
        }, scrollSmooth);
        var target = $prom[currentSlide];

        $('html, body').animate({
            scrollTop: $(target).offset().top
        }, scrollSmooth);
    });
});

//In case of different kinds of scrolling (arrows/scrollbar...) browser listens
//and changes currentSlide value based on where the scroll currently is.
$(window).scroll(function()
{
    var screenSize = window.innerHeight;
    var scrollSize = $(document).scrollTop();
    for(var i = 0, temp = $prom.length; i < temp; i++)
    {
        if(scrollSize >= screenSize * i)
        {
            currentSlide = i;
        }
    }
});

//Universal method for preventing default behavious
function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
      e.preventDefault();
  e.returnValue = false;
}

function disableScroll() {
  if (window.addEventListener) // firefox
      window.addEventListener('DOMMouseScroll', preventDefault, false);
  window.onwheel = preventDefault; // chrome/MS edge/safari...
  window.onmousewheel = document.onmousewheel = preventDefault; // older browsers
}

var currentSlide=0，
滚动平滑=1000，
$prom=$（'div.slide'）；
$（函数（）
{
//向mousewheel添加绑定侦听器（DOMMouseScroll用于FF）。。
$（窗口）.bind（'mousewheel-DOMMouseScroll'，函数（事件）
{
//Firefox nema三角洲，阿里ima细节
变量增量=（event.originalEvent.wheelDelta！==未定义？
event.originalEvent.wheelDelta:-event.originalEvent.detail）；
如果（增量>=0）
{
如果（当前幻灯片===0）
返回；
当前幻灯片--；
}
其他的
{
如果（当前幻灯片>=$prom.length-1）
返回；
currentSlide++；
}
//关闭滚动功能，直到达到div
禁用滚动（）；
setTimeout（函数（）
{ 
if（window.removeEventListener）
removeEventListener（'DOMMouseScroll'，preventDefault，false）；
window.onmouseheel=document.onmouseheel=null；
window.onwheel=null；
window.ontouchmove=null；
document.onkeydown=null；
}，平滑）；
var目标=$prom[currentSlide]；
$（'html，body'）。设置动画({
scrollTop:$（目标）.offset（）.top
}，平滑）；
});
});
//如果出现不同类型的滚动（箭头/滚动条…），浏览器将侦听
//并根据滚动条当前所在的位置更改currentSlide值。
$（窗口）。滚动（函数（）
{
var screenSize=window.innerHeight；
var scrollSize=$（document.scrollTop（）；
对于（变量i=0，温度=$prom.length；i=屏幕大小*i）
{
电流滑动=i；
}
}
});
//防止违约行为的通用方法
功能默认值（e）{
e=e | | window.event；
如果（如默认）
e、 预防默认值（）；
e、 returnValue=false；
}
函数disableScroll（）{
if（window.addEventListener）//firefox
addEventListener（'DOMMouseScroll'，preventDefault，false）；
window.onwheel=preventDefault；//chrome/MS-edge/safari。。。
window.onmouseheel=document.onmouseheel=preventDefault；//旧浏览器
}

$（target）.offset（）.top不会引发错误。但不知道它是否会解决您的问题。它确实会引发错误。请检查fiddletry$（target）.offset（）.top，而不是target.offset（）。top@GeneR是的，那很有效。有效。把它作为答案发送过来，我会接受的。

var currentSlide = 0,
    scrollSmooth = 1000,
    $prom = $('div.slide');

$(function()
{
    //Adding a binding listener to mousewheel (DOMMouseScroll is for FF)..
    $(window).bind('mousewheel DOMMouseScroll', function(event)
    {
        //Firefox nema argument wheelDelta, ali ima detail
        var delta = (event.originalEvent.wheelDelta !== undefined ? 
            event.originalEvent.wheelDelta : -event.originalEvent.detail);
        if(delta >= 0)
        {
            if(currentSlide === 0)
                return;
            currentSlide--;
        }
        else
        {
            if(currentSlide >= $prom.length - 1)
                return;
            currentSlide++;
        }
        //Turning off scroll functionality untill div is reached
        disableScroll();
        setTimeout(function() 
        { 
            if (window.removeEventListener)
                window.removeEventListener('DOMMouseScroll', preventDefault, false);
            window.onmousewheel = document.onmousewheel = null; 
            window.onwheel = null; 
            window.ontouchmove = null;  
            document.onkeydown = null; 
        }, scrollSmooth);
        var target = $prom[currentSlide];

        $('html, body').animate({
            scrollTop: $(target).offset().top
        }, scrollSmooth);
    });
});

//In case of different kinds of scrolling (arrows/scrollbar...) browser listens
//and changes currentSlide value based on where the scroll currently is.
$(window).scroll(function()
{
    var screenSize = window.innerHeight;
    var scrollSize = $(document).scrollTop();
    for(var i = 0, temp = $prom.length; i < temp; i++)
    {
        if(scrollSize >= screenSize * i)
        {
            currentSlide = i;
        }
    }
});

//Universal method for preventing default behavious
function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
      e.preventDefault();
  e.returnValue = false;
}

function disableScroll() {
  if (window.addEventListener) // firefox
      window.addEventListener('DOMMouseScroll', preventDefault, false);
  window.onwheel = preventDefault; // chrome/MS edge/safari...
  window.onmousewheel = document.onmousewheel = preventDefault; // older browsers
}