Question

在我从页面顶部向下滚动一定距离后，我正在尝试滚动到页面上的目标元素。因此，元素的滚动是由.scroll（）事件触发的。我已经能够使用以下代码执行此操作：

yourCroppieReference.result('canvas','original','png',1)

然而问题是，一旦滚动触发了此事件，页面就会粘到此滚动位置。如何在从页面顶部滚动时只编写一次只跳到此页面位置的代码？

这是我目前所拥有的Text::ParseWords。

Answer 1

你可以添加一个变量来检查它是否来自顶部。

var startsFrom = 0;
$(document).scroll(function(e) {
  if($(document).scrollTop() == 0) //you can adjust it to match whatever you want
    startsFrom = 0;
  if ($(document).scrollTop() > 250 && startsFrom == 0) {
    startsFrom = $(document).scrollTop();
    $('html, body').animate({
      scrollTop: $("#targeted-element").offset().top
    }, 650);
  }
});

https://jsfiddle.net/pdyu3f5b/14/

Answer 2

试试吧。 当您访问页面顶部时，它每次都在工作。

var gulp = require('gulp');
var browserify = require('browserify');
var watchify = require('watchify');
var source = require('vinyl-source-stream');
var reactify = require('reactify');

var production = process.env.NODE_ENV === 'production';

function scripts(watch) {
  var bundler, rebundle;
  bundler = browserify('src/components/questionbox.js', {
    basedir: __dirname, 
    debug: !production, 
    cache: {}, // required for watchify
    packageCache: {}, // required for watchify
    fullPaths: watch // required to be true only for watchify
  });
  if(watch) {
    bundler = watchify(bundler) 
  }

  bundler.transform(reactify);

  rebundle = function() {
    var stream = bundler.bundle();
    //stream.on('error', handleError('Browserify'));
    stream = stream.pipe(source('bundle.js'));
    return stream.pipe(gulp.dest('./dist/components'));
  };

  bundler.on('update', rebundle);
  return rebundle();
}

gulp.task('watchScripts', function() {
  gulp.watch('./src/components/*.js', ['scripts']);
});

gulp.task('scripts', function() {
  return scripts(false);
});

gulp.task('watchScripts', function() {
  return scripts(true);
});

<强> JSFiddle

Answer 3

为您的函数命名并使用.one()附加您的处理程序。如果未满足断点，则重新附加处理程序。

var myScrollFunc = function(e){
  if ($(document).scrollTop() > 250) {
    $('html, body').animate({
      scrollTop: $("#targeted-element").offset().top
    }, 650);
  } else {
    $(document).one('scroll', myScrollFunc);
  }
}

$(document).one('scroll', myScrollFunc);

JSFiddle

Answer 4

在使用

后删除滚动处理程序

var myScroll = function( e ) {
    if ( $(document).scrollTop() > 250) {
        $('html, body').animate({
            scrollTop: $("#cy-hero-image").offset().top
        }, 650);
        $(document).off(e);
    }
});
$(document).on('scroll', myScroll);

jQuery使用.scroll（handler）滚动到一个元素

4 个答案: